@codewithshin/svelte-heroicons

Svelte-heroicons

Hero Icons for Svelte. You can import outline and solid icons without name conflict.

You can use this icons with Tailwind CSS.

List of icons

Icon names

See all the icons at https://heroicons.com/.

Installation

npm i @codewithshin/svelte-heroicons@latest

Import

Solid icons end with xxxxxSolid and outline icons end with xxxxxOutline.

For example:

<script>
  import { AcademicCapIconSolid, AcademicCapIconOutline } from "@codewithshin/svelte-heroicons";
</script>

Props

Name	Default
size	24

You can add class to change colors.

TailwindCSS example

<AcademicCapIconSolid class=" text-pink-700 dark:text-blue-300" />

Examples

REPL

<script>
  import { AcademicCapIconSolid, AcademicCapIconOutline } from "@codewithshin/svelte-heroicons";
</script>

<AcademicCapIconSolid />

<AcademicCapIconOutline size="36" class="text-blue-500" />

<AcademicCapIconSolid size="40" class=" text-green-500" />

<AcademicCapIconOutline size="48" class="text-red-900" />

REPL example