The Clarity Icons library presents pixel-perfect, scalable SVG-based icons. This new icon system gives you complete control over icon color, orientation, and size. Additionally, you can access and customize any SVG graphic elements inside the icon through standard CSS.
Install the Clarity Icons package through npm:
Install the polyfill for Custom Elements, on which Clarity Icons is dependent:
Load the library in your app by including
clr-icons.min.css
and
clr-icons.min.js
. Also, make sure to include
custom-elements.min.js
, the Custom Elements polyfill before
clr-icons.min.js
:
clr-icons.min.js
loads not only the Clarity Icons Api, but also all icons sets, you will have access to more than 100 different icons
that have variants, orientations, and colors out of the box. You can now render any icon with
clr-icon
tag and specify your desired shape in its
shape
attribute.
If you want to use icons from few individual sets, you don't have to load all icons with
clr-icons.min.js
. Instead, load the lighter version of Clarity Icons library with
clr-icons-lite.min.js
, which loads only Clarity Icons Api and Core Shapes set. For example, if you want to use icons from only Social Shapes
and Travel Shapes, you would load Clarity Icons this way:
It's easy to load Clarity Icons API and icon sets in Typescript.
For example:
Before
v0.11.8
, users had to import the whole icons sets even if they needed to use only a few icons from those sets. Now with
v0.11.8
, users can import each icon shapes as individual modules and add them to the Clarity Icons API. Leveraging this new
method of importing icons with Tree-shaking process, you can make a significant optimization to the size of Clarity Icons
in your application. For example, if you need to use
car
,
pin
, and
star
icons in an application, you can import and add them in the following way:
"@clr/icons"
and make sure that you are not loading it via a script tag or in some other manner.