breeze-icons VS lucide

KDE's Breeze icons are SVG and look great on high DPI screens. I've used them in web projects a few times.

https://github.com/KDE/breeze-icons

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.