@fernando.mema/sv-iconify-tailwind4
v0.1.1
Published
<a id="readme-top"></a>
Maintainers
Readme
View Iconify Docs · Report Bug · Request Feature
About
This addon sets up Iconify icons in your SvelteKit project with:
- Tailwind CSS v4 plugin integration
- Multiple icon set support (10 icon sets available)
- Customizable icon prefix
- Icon component wrapper for Svelte
Requires: @tailwindcss/vite (Tailwind CSS v4)
Installation
npx sv add @fernandomema/sv-iconify-tailwind4Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| iconSets | multiselect | ['tabler'] | Icon sets to install |
| prefix | string | i | Prefix for icon classes |
Available Icon Sets
| Value | Label |
|-------|-------|
| tabler | Tabler Icons |
| lucide | Lucide Icons |
| heroicons | Heroicons |
| ph | Phosphor Icons |
| mdi | Material Design Icons |
| fa6-solid | Font Awesome 6 Solid |
| fa6-regular | Font Awesome 6 Regular |
| bi | Bootstrap Icons |
| codicon | Codicon |
| octicon | Octicon |
What It Does
Files Created
| File | Purpose |
|------|---------|
| src/lib/components/Icon.svelte | Icon wrapper component for Svelte |
Files Modified
| File | Changes |
|------|---------|
| src/routes/layout.css | Adds @plugin "@iconify/tailwind4" |
| package.json | Adds icon set packages and @iconify/tailwind4 |
Usage
After installation, use icons in your templates:
<!-- Using the Icon component -->
<Icon name="home" />
<Icon name="user" class="text-blue-500" />
<!-- Or using CSS classes directly -->
<span class="i-tabler-home"></span>
<span class="i-lucide-user"></span>Browse all available icons at Iconify.
Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
License
Distributed under the MIT License. See LICENSE.txt for more information.
Contact
Fernando - @fernandomema
Project Link: https://github.com/fernandomema/sv-addons
Acknowledgments
- Iconify - Icon framework
- Tailwind CSS - Utility-first CSS
- Svelte CLI - Official Svelte tooling
- Best README Template - README template
