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

🔋 Included icons pack

⚙️ 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" />;

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