2021-05-11 12:08:03 +02:00
|
|
|
<p align="center">
|
|
|
|
<img src="https://github.com/IconoirIcons/iconoir/blob/43b76792ddfe3a626c857dd501fa8b616001ab2c/src/iconoir.png" alt="Iconoir">
|
|
|
|
</p>
|
2021-05-04 12:55:15 +02:00
|
|
|
|
|
|
|
<p align="center">
|
2021-06-11 13:50:26 +02:00
|
|
|
Iconoir is an open source library with 900+ SVG Icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters.
|
2021-05-04 12:55:15 +02:00
|
|
|
<p>
|
|
|
|
|
|
|
|
<p align="center">
|
|
|
|
<a href="https://iconoir.com"><strong>Browse at iconoir.com →</strong></a>
|
|
|
|
</p>
|
|
|
|
|
2021-06-14 11:41:47 +02:00
|
|
|
<p align="center">
|
|
|
|
|
|
|
|
<a href="https://www.npmjs.com/package/iconoir-react">
|
|
|
|
<img src="https://img.shields.io/npm/v/iconoir-react.svg?style=flat-square" alt="NPM Monthly Downloads">
|
|
|
|
</a>
|
|
|
|
<a href="https://www.npmjs.com/package/iconoir-react">
|
|
|
|
<img src="https://img.shields.io/npm/dm/iconoir-react.svg?style=flat-square" alt="NPM Version">
|
|
|
|
</a>
|
|
|
|
<a href="https://github.com/lucaburgio/iconoir">
|
|
|
|
<img src="https://img.shields.io/github/stars/lucaburgio/iconoir?style=flat-square" alt="Project Stars">
|
|
|
|
</a>
|
|
|
|
<a href="https://github.com/lucaburgio/iconoir/blob/master/LICENSE">
|
|
|
|
<img src="https://img.shields.io/github/license/lucaburgio/iconoir?style=flat-square" alt="License">
|
|
|
|
</a>
|
|
|
|
</p>
|
2021-05-04 12:55:15 +02:00
|
|
|
|
|
|
|
## Basic Usage
|
|
|
|
|
2021-05-11 18:58:46 +02:00
|
|
|
You can download any icon of the pack directly from https://iconoir.com or get them from the repository.
|
2021-05-04 12:55:15 +02:00
|
|
|
|
2021-05-16 09:58:53 +02:00
|
|
|
## Font
|
|
|
|
|
2021-06-26 16:34:56 +02:00
|
|
|
If you want to use Iconoir in a HTML file, you just need to add the [iconoir.css](./fonts/iconoir.css) file.
|
|
|
|
|
|
|
|
Import the CSS File:
|
|
|
|
|
|
|
|
```html
|
|
|
|
<link rel="stylesheet" href="https://raw.githubusercontent.com/lucaburgio/iconoir/master/fonts/iconoir.css">
|
|
|
|
```
|
|
|
|
|
2021-05-16 09:58:53 +02:00
|
|
|
Here is an example in HTML:
|
2021-05-04 12:55:15 +02:00
|
|
|
|
2021-06-26 16:34:56 +02:00
|
|
|
```html
|
2021-05-16 09:58:53 +02:00
|
|
|
<span class="iconoir-hand-brake"></span>
|
|
|
|
```
|
2021-06-26 16:44:02 +02:00
|
|
|
The class must always be "iconoir-" and then the name of the icon. You can find the names of the icons [here](https://iconoir.com).
|
2021-06-26 16:34:56 +02:00
|
|
|
|
2021-06-27 07:17:39 +02:00
|
|
|
The webfonts are in the [/fonts](./fonts) folder. Iconoir is available in EOT, SVG, TTF, and WOFF formats.
|
2021-05-04 12:55:15 +02:00
|
|
|
|
2021-05-16 09:58:53 +02:00
|
|
|
## React
|
2021-05-04 12:55:15 +02:00
|
|
|
|
2021-05-19 21:34:42 +02:00
|
|
|
A React library is available to install under the name `iconoir-react`. For more details, see the package [README](./packages/iconoir-react).
|
2021-05-04 12:55:15 +02:00
|
|
|
|
2021-06-09 08:50:51 +02:00
|
|
|
## Framer
|
|
|
|
|
|
|
|
Iconoir is happily part of [Framer](https://framer.com) now. To start using the icons: On the top menu, `Insert` > `Graphics` > `Iconoir`.
|
|
|
|
You can switch between icons from the right sidebar in the editor.
|
|
|
|
|
2021-06-06 08:19:33 +02:00
|
|
|
## Figma
|
|
|
|
|
|
|
|
The library is available in the Figma community [here](https://www.figma.com/community/file/983248991460488027/Iconoir-Pack).
|
|
|
|
|
2021-05-04 12:55:15 +02:00
|
|
|
## License
|
|
|
|
|
2021-05-06 14:22:47 +02:00
|
|
|
MIT License
|