Solid Icons

Modern solution for use icons on SolidJS

Icons Explorer | Example

✨ Features

- 17 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

$3

``bash
yarn add solid-icons
`

$3

`bash
npm install solid-icons --save
`

Usage

`jsx
import { FaSolidChartLine } from "solid-icons/fa";

;
`

Custom icon

There are situations where you want to use your own set of icons, CustomIcon is a component exposed from the library that uses the IconTemplate that all the icons in the library already use. (Thanks kdaquila for the example).

`jsx
import { CustomIcon } from "solid-icons";

const iconContent = {
a: { fill: "currentColor", viewBox: "0 0 384 512" },
c: '',
}

;
`

$3

| Key | Default | Notes |
| ------- | ----------- | ------------------------------------------------------------------------------------------------ |
| src | required | format: a Attributes needed for the svg like viewBox, c: svg content, look at the example. |
| size | 1em | |
| class | undefined | |
| title | undefined | A icon title a11y |

🔋 Included icons pack

| Icon Library | License | Version | Abbreviation |
| ------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------- | ------------ |
| Ant Design Icons | MIT | 4.4.2 | ai |
| Bootstrap Icons | MIT | 1.13.1 | bs |
| BoxIcons | CC BY 4.0 License | 2.1.4 | bi |
| Feather | MIT | 4.29.2 | fi |
| Font Awesome | CC BY 4.0 License | 6.7.0 | fa |
| Heroicons | MIT | 2.2.0 | hi |
| IcoMoon Free | CC BY 4.0 License | 1.0.0 | im |
| Ionicons | MIT | 8.0.13 | io |
| Remix Icon | Apache License Version 2.0 | 4.8.0 | ri |
| Simple Icons | CC0 1.0 Universal | 16.3.0 | si |
| Typicons | CC BY-SA 3.0 | 2.1.2 | ti |
| VS Code Icons | CC BY 4.0 | 0.0.44 | vs |
| Weather Icons | SIL OFL 1.1 | 2.0.12 | wi |
| css.gg | MIT | 2.1.4 | cg |
| Tabler Icons | MIT | 3.36.0 | tb |
| Github Octicons | MIT | 19.21.1 | oc |
| Material Design Icons | Apache License Version 2.0 | 0.14.15 | md |

⚙️ Configuration

solid-icons components receive props like any SVG, you also have a few custom ones.

`jsx
import { FaSolidChartLine } from "solid-icons/fa";

;
`

| Key | Default | Notes |
| ------- | ------------------------ | ----------------- |
| color | currentColor (inherit) | |
| size | 1em | |
| class | undefined | |
| title | undefined | A icon title a11y |

💻 Development

requirements:

node ^16.14.0

$3

You can locally clone this repository:

`bash
$ git clone https://github.com/x64Bits/solid-icons
$ cd solid-icons
$ yarn
$ yarn build
`

$3

If you did the above steps and want to build while listening if the files change you can run:

`bash
$ yarn dev
`

$3

Isolate a single library, this allows you to avoid recompiling the entire library and thus optimize the result of a single one:

`bash
$ 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:

`bash
$ yarn dev --web
``

📝 Licence

MIT

- Icons are taken from the other projects so please check each project licences accordingly.