svelte-hero-icons
TypeScript icon, indicating that this package has built-in type declarations

5.1.0 • Public • Published

Svelte Heroicons

If you want to use more Icons Packs and components for multiple Frameworks (React, Vue, Lit and more), check out @steeze-ui/icons which is meant as a successor to svelte-hero-icons:

What is @steeze-ui/Icons ?

  • Icon Components for various frameworks (svelte, lit, solid and react)
  • Icon Packs (e.g heroicons, radix-icons, feathericons and more)
  • A template to create your own publishable Icon Pack
  • Now lives under an org that will focus on more ui tools for svelte

Description

  • complete heroicons set optimized for svelte
  • programatically change solid or outline version based on the solid attribute (solid, mini, micro)
  • fully typed for a great IDE experience
  • works out of the box with SvelteKit
  • SSR compatible (no JS is needed for the client to display the icon)

Installation

  • install as devDependency

Example for npm

npm i -D svelte-hero-icons

Configuration

SvelteKit

  • svelte-hero-icons should work with SvelteKit without any configuration
  • If you have any problems, this could help adding to your vite.config.js:
ssr: {
   noExternal: ["svelte-hero-icons"],
 }

Usage

  • Default is Outline version of icon
  • Use solid attribute for Solid Icons
<script>
  // Only import what you need!
  import { Icon, ArrowUp, Filter } from "svelte-hero-icons";
</script>
<!-- default it's using the outline version of this icon -->
<Icon src="{Filter}" />

<!-- use solid attribute to display the solid version of this icon -->
<Icon src="{Filter}" solid />

<!-- use mini attribute to display the mini version of this icon -->
<Icon src="{Filter}" mini />

<!-- use micro attribute to display the micro version of this icon -->
<Icon src="{Filter}" micro />

<!-- in this (rather unusual) case solid will have the precedence -->
<Icon src="{Filter}" solid mini />

<!-- use size attribute to set icon size (32 -> 32px | 2rem | 100% == default ) -->
<Icon src="{ArrowUp}" size="32" />

<!-- use Windi CSS or tailwindcss classes directly -->
<Icon src="{Filter}" class="h-6 text-red-500 w-6" />

Use with types

<script>
  import { Icon, Filter, type IconSource } from "svelte-hero-icons";
  export let icon:IconSource = Filter
</script>

<Icon src="{icon}" solid />

Author

This package is based on heroicons

See all available icons here: https://github.com/refactoringui/heroicons

Package Sidebar

Install

npm i svelte-hero-icons

Weekly Downloads

2,464

Version

5.1.0

License

MIT

Unpacked Size

7.65 kB

Total Files

7

Last publish

Collaborators

  • justinvoitel