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