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@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
<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" />