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).

View available icons

Table of contents

1. Features
2. Getting Minicons
   1. CDN
   2. ZIP
   3. NPM
3. Quick start
4. API
   1. Properties
      • minicons.icons
      • minicons.config
   2. Methods
      • minicons.find()
      • minicons.create()
      • minicons.swap()
5. Contributing guidelines
6. License

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