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:
https://unpkg.com/minicons@latest/dist/minicons.js
CDN links are also supported for older specified versions:
https://unpkg.com/minicons@_VERSION_/dist/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:
<script src=https://unpkg.com/minicons@latest/dist/minicons.js"></script>
<!-- or use a relative path -->
<script src="path/to/dist/minicons.min.js"></script>
2. Add an icon
Now it's time to add an icon. Just create a tag with data-minicon
and the name:
<i data-minicon="chevron-right"/>
3. Make the swap
To display the Minicon we do to the swap:
minicons.swap();
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: 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 passing name and prop parameters.
Returns: 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-minicon="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 contributing guidelines.
License
Minicons is licensed under the MIT License