https://github.com/zaydek/heroicons.dev

Web viewer for Heroicons (V2 and V1)
https://github.com/zaydek/heroicons.dev

react sass typescript unocss vite

Last synced: 10 days ago
JSON representation

Web viewer for Heroicons (V2 and V1)

• Host: GitHub
• URL: https://github.com/zaydek/heroicons.dev
• Owner: zaydek
• License: mit
• Created: 2020-02-24T16:47:13.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-19T02:10:59.000Z (11 months ago)
• Last Synced: 2024-10-15T12:04:39.132Z (24 days ago)
• Topics: react, sass, typescript, unocss, vite
• Language: TypeScript
• Homepage: https://heroicons.dev
• Size: 4.62 MB
• Stars: 1,239
• Watchers: 11
• Forks: 24
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-NextJs - heroicons - [website](https://heroicons.dev/) (Build with Nextjs)

README

        
# 🛡️ Heroicons

Heroicons is a collection of MIT open source interface icons for web and app development. Icons are free, no

attribution required.

🖼️ Icons by [@steveschoger 🔗](https://twitter.com/steveschoger)


🖥️ Website by [@username_ZAYDEK 🔗](https://twitter.com/username_ZAYDEK)


💙 [Share on Twitter 🔗](http://twitter.com/intent/tweet?text=Check%20out%20Heroicons%20%F0%9F%92%AF%0A%0AThanks%20@steveschoger%20for%20designing%20Heroicons%20and%20@username_ZAYDEK%20for%20the%20new%20heroicons.dev%0A%0Aheroicons.dev)


_Looking for the official Heroicons [website](https://heroicons.com)?_

## Site Features

✨ Dark mode 😎


✨ Flexible search (search camel-case, kebabCase, space case)


✨ View icons from all variants and versions (includes legacy icons)


✨ Preview icon size and stroke width 💪


✨ Copy to the clipboard as code or [@heroicons 🔗](https://github.com/tailwindlabs/heroicons) import


✨ Format as JSX, Strict JSX, and TypeScript JSX 🦾


✨ Download icons, filenames and extensions are auto-generated from settings


✨ All state is pesisted via search parameters


## Technology Stack

[heroicons.dev](https://heroicons-viewer.netlify.app) has been around for a while (the first Heroicons website in existence 🤭) and has evolved. The current technology stack is:

🥞 [Vite 🔗](https://vitejs.dev)


🥞 [TypeScript 🔗](https://typescriptlang.org)


🥞 [React 🔗](https://reactjs.org)


🥞 [UnoCSS 🔗](https://github.com/unocss/unocss)


🥞 [Sass 🔗](https://sass-lang.com)


## Get Started (Vite)

Start the development server:

```sh

npm run dev

# Or npx vite dev

```

Build the production-ready build:

```sh

npm run build

# Or npx tsc && npx vite build

```

Serve the production-ready build:

```sh

npm run preview

# Or npx vite preview

```

## License

Licensed as MIT open source.