solid-icons
solid-icons copied to clipboard
The simplest way to use icons in SolidJS
Solid Icons
Modern solution for use icons on SolidJS
✨ Features
- 16 Icon packs totally ready to use.
- Compatible with Solid Start static generation and SSR.
- Tree shakeable: What you take is what you get.
- Customizable - receive props to extend their usefulness.
- Reactivity, take advantage of SolidJS to react to changes in props.
- Just import and declare in your JSX to work out-the-box
- First class TypeScript support
📦 Installation
Yarn
yarn add solid-icons
NPM
npm install solid-icons --save
Usage
import { SiJavascript } from "solid-icons/si";
<SiJavascript size={24} color="#2c4f7c" />;
🔋 Included icons pack
Icon Library | License | Version |
---|---|---|
Ant Design Icons | MIT | 4.1.0 |
Bootstrap Icons | MIT | 1.7.2 |
BoxIcons | CC BY 4.0 License | 2.1.1 |
Feather | MIT | 4.28.0 |
Font Awesome | CC BY 4.0 License | 5.15.4 |
Heroicons | MIT | 1.0.3 |
IcoMoon Free | CC BY 4.0 License | 1.0.0 |
Ionicons | MIT | 5.5.2 |
Remix Icon | Apache License Version 2.0 | 2.5.0 |
Simple Icons | CC0 1.0 Universal | 6.7.0 |
Typicons | CC BY-SA 3.0 | 2.1.2 |
VS Code Icons | CC BY 4.0 | 0.0.27 |
Weather Icons | SIL OFL 1.1 | 2.0.12 |
css.gg | MIT | 2.0.0 |
Tabler Icons | MIT | 1.70.0 |
Github Octicons | MIT | 17.3.0 |
⚙️ Configuration
solid-icons components receive props like any SVG, you also have a few custom ones.
import { SiJavascript } from "solid-icons/si";
<SiJavascript size={24} color="#2c4f7c" class="custom-icon" title="a11y" />;
Key | Default | Notes |
---|---|---|
color |
currentColor (inherit) |
|
size |
1em |
|
class |
undefined |
|
title |
undefined |
A icon title a11y |
💻 Development
requirements:
node ^16.14.0
Basic build
You can locally clone this repository:
$ git clone https://github.com/x64Bits/solid-icons
$ cd solid-icons
$ yarn
$ yarn build
Build dev mode
If you did the above steps and want to build while listening if the files change you can run:
$ yarn dev
Supported arguments
Isolate a single library, this allows you to avoid recompiling the entire library and thus optimize the result of a single one:
$ yarn dev --isolate="ai"
This command is used to build the files destined for web, if you want to change the path, in src/build/constants.ts
you can modify the output of the files:
$ yarn dev --web
📝 Licence
MIT
- Icons are taken from the other projects so please check each project licences accordingly.