svelte-hero-icons

Svelte Heroicons

Description

• complete heroicon set optimized for svelte
• programatically change solid or outline version based on the solid attribute
• fully typed for a great IDE experience
• works with SvelteKit & Vite

Install

NPM

npm install svelte-hero-icons

Configuration

SvelteKit & vitejs

• install as dependency (important)
• Add this to your vite.config.js, so all icons are bundled into one file -> no import waterfalls

export default {
  // other vite config stuff
  optimizeDeps: {
    include: ['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>

<!-- use solid attribute to control whether to show solid or outline version of icon -->
<Icon src="{Filter}" solid />

<!-- 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="w-6 h-6 text-red-500" />

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

Author

This package is based on heroicons