✨ 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 @aminya/solid-icons

NPM

npm install @aminya/solid-icons --save

Usage

import { SiJavascript } from "@aminya/solid-icons/si/SiJavascript";

<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 | 6.1.2 | | 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.119.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.