svelte-hero-icons

Svelte Heroicons

!!!WARNING!!!

With version 3.0.0 , this package is primarily meant for SvelteKit projects and it is not guaranteed to work with other build systems!

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

• install as dependency (important)

NPM

npm install svelte-hero-icons

Configuration

SvelteKit & vitejs

• Add this to your vite.config.js, so all icons are bundled into one file -> no import waterfalls

const config = {
  kit: {
    vite: {
      //!IMPORTANT so the icon data can be imported (as JSON)
      ssr: {
        noExternal: ["svelte-hero-icons"],
      },

      // no import waterfalls in development
      optimizeDeps: {
        include: ["svelte-hero-icons"],
      },
    },
  },
};
export default config;

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

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

Known Problems

Windows & pnpm

If you are developing with Windows or pnpm you need to prevent the dependency from being externalized for SSR:

const config = {
  // ...
  kit: {
    // ...
    vite: {
      // ...
      ssr: {
        noExternal: ["svelte-hero-icons"],
      },
    },
  },
};

Author

This package is based on heroicons