spark-joy VS lucide

what about Excalidraw / TLDraw? there are so many of these canvas drawing apps[1]. draw on them, take a screenshot. doesnt export to svg but do people really need that?

[1]: https://github.com/swyxio/spark-joy/blob/master/README.md#ge...

ive been a keeping a list of other diagramming tools too https://github.com/swyxio/spark-joy/blob/master/README.md#di...

i've been keeping my own resource list for a few years: https://github.com/sw-yx/spark-joy/

just offering for anyone else interested!

i collect these for fun! adding to my collection https://github.com/sw-yx/spark-joy/blob/master/README.md#dro...

more like this:

  -  https://andybrewer.github.io/mvp/ mvp.css

my list of icon resources here: https://github.com/sw-yx/spark-joy/blob/master/README.md#ico...

ok this is a fantatsic solution. took me a while to get why this is better than joshwcomeau's solution, but now i am using this as my default.

(dont wanna seem too pluggy but just sharing my cumulative css notes: https://github.com/sw-yx/spark-joy/ i dont make money from this)

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.