/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 @aminya/solid-icons

NPM

npm install @aminya/solid-icons --save

Usage

import { SiJavascript } from "@aminya/solid-icons/si/SiJavascript";

<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 6.1.2
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.119.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.