unplugin-icons VS lucide

🤹 Unplugin Icons

Now i am using https://github.com/antfu/unplugin-icons

unplugin-icons will be the easiest and most robust option if you are using a bundler

I highly recommend unplugin-icons. It has first class SvelteKit support and uses Iconify under the hood. Here is the introductory blog post.

This might not answer your question directly but unplugin-icons might be the best way to use Icons in any project in general.

Pro tip: try to get them added to https://github.com/iconify/iconify / https://github.com/antfu/unplugin-icons

I use the Unplugin-Icon package that gives access to Iconify. That way I can select icons from multiple libraries.

Just use this: https://github.com/antfu/unplugin-icons

I will suggest unplugin-icons package

Here's my result, thanks again! Turns out yes you can put emoji in the file name. Haven't figured out a way to use SVG icons which would have been nice but I'll keep at it, and this is stellar anyway.

Where --callout-color is the RGB value and --callout-icon is anything you pick from https://lucide.dev/

The theme editor’s interface allows you to configure themes for properties such as color, border radius, and mode (light or dark). You can also choose between two styles: default and new-york. The styles have unique components, animations, icons, and more. The default style has larger input fields and uses lucide-react icons and tailwindcss-animate for animations. The new-york style has smaller buttons, cards with shadows, and uses Radix Icons.

There's no first-class Lucide integration for Astro. But making a custom one isn't too hard.

for icons i'm using iconify (https://iconify.design/docs/icon-components/svelte/), but I'm looking forward svelte-icons (https://svelte-icons.vercel.app/) and lucide.dev looks as well

import type { FC } from "react"; import { useState } from "react"; const Menu: FC = function Menu() { const [open, setOpen] = useState(false); const handleClick = () => { setOpen(!open); }; // icons by Lucide: https://lucide.dev/ return (

{open ? ( path> svg> ) : ( path> svg> )} button>

• Homea> li>
• Abouta> li> ul> nav> div> ); }; export default Menu;

I copied this from the Obsidian help page. I saved this into the snippet folder, refreshed it, and toggle the snippet on in the settings menu. "Lucide-folder-clock" is referencing these icons.