https://github.com/amoutonbrady/solid-heroicons

https://github.com/amoutonbrady/solid-heroicons

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/amoutonbrady/solid-heroicons
• Owner: amoutonbrady
• Created: 2020-08-15T20:57:00.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-03-14T14:52:30.000Z (10 months ago)
• Last Synced: 2024-05-30T16:31:26.792Z (8 months ago)
• Language: TypeScript
• Size: 45.9 MB
• Stars: 74
• Watchers: 2
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-solid-js - Solid HeroIcons - heroicons)) (📦 Components & Libraries / UI Components)

README

        
# Solid Heroicons

> :warning: **This is not an official implementation**: All credits goes out to the Heroicons and Tailwind CSS team.

[Heroicons](https://github.com/tailwindlabs/heroicons) integration for [Solid](https://github.com/ryansolid/solid) with a twist.

[Demo](https://codesandbox.io/s/solid-heroicons-f26s1?file=/src/index.tsx)

## Installation

```bash

$ npm install solid-heroicons

$ yarn add solid-heroicons

$ pnpm add solid-heroicons

```

## Usage

You can import every icon from heroicons [solid](https://github.com/tailwindlabs/heroicons/tree/master/24/solid), [outline](https://github.com/tailwindlabs/heroicons/tree/master/24/outline), or [solid-mini](https://github.com/tailwindlabs/heroicons/tree/master/20/solid) from `solid-heroicons/solid`, `solid-heroicons/outline` and `solid-heroicons/solid-mini` respectively. 

They are exported as camel case. Everything exported from those packages are just an object with the SVG path and a metadata to know whether it's been exported from the solid, outline or mini variant.

Those packages are generated automatically via a script from [the heroicon repo](https://github.com/tailwindlabs/heroicons).

You can import the `Icon` component helper from `solid-heroicons`. This is just a `SVGElement` wrapper that accepts any props a regular SVG would plus a special props `path` for the icon you want to load in.

By default the `stroke` | `fill` attribute of the SVG is set to `currentColor` which means you can give any color you want to the SVG by setting the css `color` attribute on SVG or any parent higher.

```tsx

import { render } from "solid-js/dom";

import { Icon } from "solid-heroicons";

import { arrowLeft } from "solid-heroicons/solid";

import { arrowRight } from "solid-heroicons/outline";

import { arrowDown } from "solid-heroicons/solid-mini";

const App = () => (

  <>

    

    

    

  >

);

render(() => App, document.getElementById("app"));

```