solid-icons
v1.1.0
Published
Modern solution for use icons on SolidJS
Downloads
25,074
Readme
✨ 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 { TbBrandSolidjs } from "solid-icons/tb";
<TbBrandSolidjs size={24} color="#2c4f7c" />;
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).
import { CustomIcon } from "solid-icons/lib";
const iconContent = {
a: { fill: "currentColor", viewBox: "0 0 384 512" },
c: '<path d="M384 319.1C384 425.9 297.9 512 192 512S0 425.87 0 320c0-58.67 27.82-106.8 54.57-134.1C69.54 169.3 96 179.8 96 201.5V287c0 35.17 27.97 64.5 63.16 64.94C194.9 352.5 224 323.6 224 288c0-88-175.1-96.12-52.15-277.2C185.35-8.92 216 .03 216 23.83 215.1 127 384 149.7 384 319.1z"/>',
}
<CustomIcon src={iconContent} size={24} color="#2c4f7c" />;
Props
| 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.2.1 | ai | | Bootstrap Icons | MIT | 1.10.5 | bs | | BoxIcons | CC BY 4.0 License | 2.1.4 | bi | | Feather | MIT | 4.29.0 | fi | | Font Awesome | CC BY 4.0 License | 6.4.0 | fa | | Heroicons | MIT | 2.0.18 | hi | | IcoMoon Free | CC BY 4.0 License | 1.0.0 | im | | Ionicons | MIT | 7.1.2 | io | | Remix Icon | Apache License Version 2.0 | 3.3.0 | ri | | Simple Icons | CC0 1.0 Universal | 9.0.0 | si | | Typicons | CC BY-SA 3.0 | 2.1.2 | ti | | VS Code Icons | CC BY 4.0 | 0.0.32 | vs | | Weather Icons | SIL OFL 1.1 | 2.0.12 | wi | | css.gg | MIT | 2.0.0 | cg | | Tabler Icons | MIT | 2.20.0 | tb | | Github Octicons | MIT | 19.1.0 | oc |
⚙️ Configuration
solid-icons components receive props like any SVG, you also have a few custom ones.
import { TbBrandSolidjs } from "solid-icons/tb";
<TbBrandSolidjs 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.