Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/x64Bits/solid-icons
The simplest way to use icons in SolidJS
https://github.com/x64Bits/solid-icons
brands design icon-pack icons iconset logo solidjs svg svg-files svg-icons
Last synced: about 1 month ago
JSON representation
The simplest way to use icons in SolidJS
- Host: GitHub
- URL: https://github.com/x64Bits/solid-icons
- Owner: x64Bits
- License: mit
- Created: 2021-07-20T05:47:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-30T04:24:03.000Z (about 1 year ago)
- Last Synced: 2024-07-19T03:36:21.942Z (5 months ago)
- Topics: brands, design, icon-pack, icons, iconset, logo, solidjs, svg, svg-files, svg-icons
- Language: TypeScript
- Homepage: https://solid-icons.vercel.app
- Size: 270 KB
- Stars: 285
- Watchers: 3
- Forks: 18
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG
- License: LICENSE
Awesome Lists containing this project
- awesome-solid-js - Solid Icons - icons)) (📦 Components & Libraries / UI Components)
README
Solid Icons
Modern solution for use icons on SolidJS
## ✨ Features
- [16 Icon packs](#-included-icons-pack) totally ready to use.
- Compatible with [Solid Start](https://github.com/solidjs/solid-start) static generation and SSR.
- Tree shakeable: What you take is what you get.
- [Customizable](#%EF%B8%8F-configuration) - receive props to extend their usefulness.
- [Reactivity](https://www.youtube.com/watch?v=J70HXl1KhWE), take advantage of SolidJS to react to changes in props.
- [Just import and declare](#usage) in your JSX to work out-the-box
- First class TypeScript support
## 📦 Installation
### Yarn
```bash
yarn add solid-icons
```
### NPM
```bash
npm install solid-icons --save
```
## Usage
```jsx
import { TbBrandSolidjs } from "solid-icons/tb";
;
```
## 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](https://github.com/kdaquila) for the example).
```jsx
import { CustomIcon } from "solid-icons/lib";
const iconContent = {
a: { fill: "currentColor", viewBox: "0 0 384 512" },
c: '',
}
;
```
### 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](https://github.com/ant-design/ant-design-icons) | [MIT](https://opensource.org/licenses/MIT) | 4.2.1 | ai |
| [Bootstrap Icons](https://github.com/twbs/icons) | [MIT](https://opensource.org/licenses/MIT) | 1.10.5 | bs |
| [BoxIcons](https://github.com/atisawd/boxicons) | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/) | 2.1.4 | bi |
| [Feather](https://feathericons.com/) | [MIT](https://github.com/feathericons/feather/blob/master/LICENSE) | 4.29.0 | fi |
| [Font Awesome](https://fontawesome.com/) | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/) | 6.4.0 | fa |
| [Heroicons](https://github.com/refactoringui/heroicons) | [MIT](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE) | 2.0.18 | hi |
| [IcoMoon Free](https://github.com/Keyamoon/IcoMoon-Free) | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/) | 1.0.0 | im |
| [Ionicons](https://ionicons.com/) | [MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE) | 7.1.2 | io |
| [Remix Icon](https://github.com/Remix-Design/RemixIcon) | [Apache License Version 2.0](http://www.apache.org/licenses/) | 3.3.0 | ri |
| [Simple Icons](https://simpleicons.org/) | [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/) | 9.0.0 | si |
| [Typicons](http://s-ings.com/typicons/) | [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/) | 2.1.2 | ti |
| [VS Code Icons](https://github.com/microsoft/vscode-codicons) | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) | 0.0.32 | vs |
| [Weather Icons](https://erikflowers.github.io/weather-icons/) | [SIL OFL 1.1](http://scripts.sil.org/OFL) | 2.0.12 | wi |
| [css.gg](https://github.com/astrit/css.gg) | [MIT](https://opensource.org/licenses/MIT) | 2.0.0 | cg |
| [Tabler Icons](https://github.com/tabler/tabler-icons) | [MIT](https://opensource.org/licenses/MIT) | 2.20.0 | tb |
| [Github Octicons](https://github.com/primer/octicons) | [MIT](https://opensource.org/licenses/MIT) | 19.1.0 | oc |
## ⚙️ Configuration
solid-icons components receive props like any SVG, you also have a few custom ones.
```jsx
import { TbBrandSolidjs } from "solid-icons/tb";
;
```
| 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:
```bash
$ 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:
```bash
$ 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:
```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.