Minicons
About Minicons
Minicons is an open-source SVG icon set drafted on an 24x24 sized grid aimed at unifying icon design across a website. Currently the first release is covering several categories of icons (86 total).
Table of contents
Features
- Dead simple to set up
- Icon swap when an element is dynamically added
- Extensive, straight forward icon object API
- Over 80+ icons
- Uniform design
- Easily configurable
Getting Minicons
CDN
You can directly import minicons.js from the CDN:
http://cdn.darken.io/minicons/1.0/minicons.js
Download the ZIP
Download the latest release.
Using NPM
Install Minicons using CDN
npm i minicons -S
This will create all dist files in the Minicons package folder in your roots' node modules.
├── dist/
├── icons/
├── minicons.js
├── minicons.min.js
└── minicons.json
Quick start
Get up and running within minutes inside your browser.
1. Include
Include the CDN or the path to minicons.js at the end of your closing <body/>
tag in your markup:
<!-- or use a relative path -->
2. Add an icon
Now it's time to add an icon. Just create a tag with data-minicon
and the name:
3. Make the swap
To display the Minicon we do to the swap:
minicons;
All icons added dynamically will be swapped automagically for you. 😎
API
minicons
The minicons
object is exposed upon including/importing the Minicons package into your ecosystem.
Properties
minicons.icons
Contains an array of data about every single icon.
Returns an array of icon objects
Property | Type | Description |
---|---|---|
aliases |
array | List of alias names |
content |
string | SVG string of the icon |
name |
string | The name of the icon |
minicons.config
The config object Minicons was produced from.
Returns a config object
Property | Type | Description |
---|---|---|
name |
string | The name of the config |
props |
object | The properties that will apply to the svg |
props.class |
string | Additional class to be added to the icon |
props.fill |
string | Fill to be added |
props.height |
number | Height of the icon |
props.stroke |
string | Stroke color of the icon |
props.stroke-linecap |
string | Linecap used to brush over |
props.stroke-linejoin |
string | How the lines will be joined together |
props.stroke-width |
number | Width of the stroke applied |
props.viewBox |
string | Viewbox of the SVG icon container |
props.width |
number | Width of the icon |
props.xmlns |
string | SVG namespace that is used |
Methods
minicons.find(name)
Finds an icon by name or alias and returns the icon object.
Parameter | Type | Description |
---|---|---|
name |
string | The name or alias of an icon e.g add-circle |
Usage
minicons.find('plus')// {name: "add-circle", content: "<circle cx="12" cy="12" r="10" data-name="--Circle…><line x1="12" x2="12" y1="15.5" y2="8.5"></line>", aliases: Array(1)}
minicons.create(name, props)
Creates and returns an SVG icon by name and props.
Returns an SVG element.
Parameter | Type | Description |
---|---|---|
name |
string | The name or alias of an icon e.g add-circle |
props |
object | Objects of props that will be translated to attributes on the SVG element. e.g { stroke: 'red' } will be converted to stroke="red" |
Usage
minicons.find('plus')// {name: "add-circle", content: "<circle cx="12" cy="12" r="10" data-name="--Circle…><line x1="12" x2="12" y1="15.5" y2="8.5"></line>", aliases: Array(1)}
minicons.swap()
Swaps elements in the DOM with the data-minicon
attribute into an SVG minicon. Only works in a browser environment.
Usage
<i data-feather="plus"></i> <script> minicons.swap()</script>
Building
Clean, optimize and parse SVG icon files in the icons directory
$ ./build.sh icons
...or to additionally package Minicons and run tests
$ ./build.sh
Contributing guidelines
If you wish to contribute to the Minicons project please check out the .
License
Minicons is licensed under the