Install

So, if you want to use these icons, be my guest! I even made it a little easier. You can easily install this package into your project using npm or yarn.

npm install silicons --save-dev or yarn add silicons

And import the file in your main scss file like:

@import '~silicons';

Find this project on github: gitbub/silvandiepen/silicons


npm version GitHub version

Settings

You can change some settings for the icons by defining some variable before you load 'silicons'.

Name Variable Default Description
Prefix $silicons-prefix silicon- The prefix is used for all icons.
stroke width $silicons-stroke 0.1 The stroke is used in 'em'. So the stroke is based on the font-size given to the element.

Colors

For the colored versions of the icons, only one set of specific colors is used. These colors can easily be changed by redefining the color. This can be done using a scss variable or with acustom property

the set
$variable custom-property default value
$silicon-color-black --black #101010
$silicon-color-white --white #ffffff
$silicon-color-offwhite --offwhite #f7f7f7
$silicon-color-gray --gray #7f7f7f
$silicon-color-green --green #10c565
$silicon-color-light-blue --light-blue #61caea
$silicon-color-blue --blue #1eb3e0
$silicon-color-dark-blue --dark-blue #188fb3
$silicon-color-red --red #eb0f33
$silicon-color-dark-red --dark-red #bb0c29
$silicon-color-brown --brown #aa834f
$silicon-color-beige --beige #cdb492
$silicon-color-yellow --yellow #f5c505
$silicon-color-orange --orange #f6790b
$silicon-color-pink --pink #ca1387
$silicon-color-purple --purple #7329b1
$silicon-color-turquoise --turquoise #3feac3
scss variable

You can redefine the color of a variable by just setting it before you import silicons. This will override the default color in silicons and will be used. note: a custom property, overrides the sass variable.

custom properties

Defining the color can also be done using a custom property, the properties as mentioned before are not set by silicons, but are getting used. The default color is the fallback color. In this way, a set custom propertie will override any color.

example:
Is the default icon which becomes the text color (white).
Is the default icon, with another text color set on the element.
has an extra "colored" class. The default color (turquoise) is used now.
here the --turquoise is set to red.


Mixins

All icons are build up in mixins. These mixins can be used when in you add silicons to your project. In this way you don't have to add all icons to your project and you are able to use your own classes.

for example:

The default class for the print icons is .silicon-printer, but you want to use this icon on the class .icon-print. In your project, just add @include silicon-printer('icon-print'); and this will output the code for the print icon on the class icon-print


Direct

You can alo just directly implement the css in your project. In this way you can use all the classes as they are.

https://cdn.silicons.nl/icons.min.css
the end..