0.0.3 • Published 3 years ago
@inqling/svelte-heroicons v0.0.3
Svelte Heroicons
Why this package?
Copying SVG code into your project can become tedious and messy if you don't need to edit the SVG markup. This library simply makes it easier to import each icon and have it scale based on it's inherited font-size.
Find the original repository for Heroicons on Github: tailwindlabs/heroicons
Basic Usage
<script>
import { AcademicCap } from "@inqling/svelte-heroicons";
</script>
<style>
.icon {
font-size: 40px;
color: red;
}
</style>
<div class="icon"><AcademicCap /></div>
importing icons from @inqling/svelte-heroicons
will use solid icons by default. You can manually import outline icons from @inqling/svelte-heroicons/outline
.
Example:
<script lang="ts">
import { AcademicCap } from "@inqling/svelte-heroicons/outline";
</script>
To improve performance and bundle size, you can import icons directly: @inqling/svelte-heroicons/svg/<type>/<icon>.svelte
Example:
<script lang="ts">
import Icon from "@inqling/svelte-heroicons/svg/outline/academic-cap.svelte";
</script>
Styling
- The icon will scale in size so that the height of the icon is the current font-size.
- The icon will inherit the current text color.
To-do
- Add SVG component that loads paths dynamically.
- Include a component to dynamically set the icon. Ex
<Icon type="icon-name" />
.
License
This library is MIT licensed.