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

babeard/svelte-hero-icons