solid-icons

Solid Icons

Modern solution for use icons on SolidJS

Icons Explorer | Example

✨ 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.