npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

solid-icons

v1.1.0

Published

Modern solution for use icons on SolidJS

Downloads

24,974

Readme

✨ Features

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