@siiron/sds-icons NPM

Siiron Icons

General

All icons come in three sizes:

small: 16px
base: 24px
medium: 32px

SVG

Add Icon CSS

To style the Icon SVGs, add the Icon CSS to your website.

The CSS is located in the dist/assets/styles/css/ folder.

<link href="siiron-icons.min.css" rel="stylesheet">

Using Icon SVGs

All SVGs are located in the dist/assets/img/icons/svg/static/ folder.

<!-- Small icon -->
<img class="icn icn--size-base" src="box.svg" alt="Box">

<!-- Base icon -->
<img class="icn icn--size-base" src="box.svg" alt="Box">

<!-- Medium icon -->
<img class="icn icn--size-mdium" src="box.svg" alt="Box">

Using Icon SVG Sprite

Icons can also be used as a SVG sprite. This allows you to display all the icons in the set using just a single request.

The approach is a little different than using single SVGs.

The SVG sprite is located in the dist/assets/img/icons/svg/sprite/ folder.

<!-- Small icon -->
<svg class="icn icn--size-small" focusable="false">
    <use xlink:href="icons.svg#box"></use>
</svg>

<!-- Base icon -->
<svg class="icn icn--size-base" focusable="false">
    <use xlink:href="icons.svg#box"></use>
</svg>

<!-- Medium icon -->
<svg class="icn icn--size-medium" focusable="false">
    <use xlink:href="icons.svg#box"></use>
</svg>

Since all fills and strokes use currentColor, this will make SVGs inherit the color set in the color property, either on the element itself or the first parent element with a declared color property.

.icn {
    color: #bada55;
}

Icon font

If you can't use SVG icons, you can choose font. You'll find the default stylesheet in dist/assets/styles/css/ and the font files in dist/assets/fonts/icons/

<link href="siiron-glyphs.min.css" rel="stylesheet">

<!-- Small icon -->
<span class="icn icn--size-small icn--box"></span>

<!-- Base icon -->
<span class="icn icn--size-base icn--box"></span>

<!-- Medium icon -->
<span class="icn icn--size-medium icn--box"></span>

Contributing

Prepping SVG XML code

Icons should be able to be modified with CSS to change its color (fill) and size (width, height).

Run SVG XML code through SVGOMG. Inspect the code and make sure that your XML doesn't include the following:

<style> tags
<g> tags
class attribtues
stroke attributes
stroke-width attributes