/solid-icons

The simplest way to use icons in SolidJS

Primary LanguageTypeScriptMIT LicenseMIT

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.