https://github.com/elilabes/heroicons-qwik

A Qwik implementation of Heroicons
https://github.com/elilabes/heroicons-qwik

Last synced: 2 months ago
JSON representation

A Qwik implementation of Heroicons

• Host: GitHub
• URL: https://github.com/elilabes/heroicons-qwik
• Owner: elilabes
• License: mit
• Created: 2022-11-10T08:47:44.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-10T09:30:08.000Z (about 2 years ago)
• Last Synced: 2024-08-04T18:01:37.736Z (6 months ago)
• Language: TypeScript
• Size: 579 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-qwik - Qwik Heroicons

README

        


  

    

  

  

    

  





  Qwik implementation of heroicons - Browse at Heroicons.com →  



This is an implementation of Heroicons in the [Qwik](https://qwik.builder.io/) framework.

Both icon styles are preconfigured to be stylable by setting the `color` CSS property, either manually or using utility classes like `text-gray-500` in a framework like [Tailwind CSS](https://tailwindcss.com).

## Quick start

Install `heroicons-qwik` from npm:

```sh

npm install heroicons-qwik

```

Now each icon can be imported individually as a Qwik component:

```js

import { component$ } from "@builder.io/qwik";

import { BeakerIcon } from "heroicons-qwik/24/solid";

export default component$(() => {

  return (

    


      

      
...

    

  );

});

```


The 24x24 outline icons can be imported from `heroicons-qwik/24/outline`, the 24x24 solid icons can be imported from `heroicons-qwik/24/solid`, and the 20x20 solid icons can be imported from `heroicons-qwik/20/solid`.

Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.

## License

This library is MIT licensed.