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
See all the icons at https://heroicons.com/.
Installation
npm i @codewithshin/svelte-heroicons@latestImport
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
<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" />