Lucide Icon Support

[dimfeld]

Related: #267

More just reporting some research than a feature request.

lucide-svelte exposes each icon as a Svelte component. If you want to support it in a way that works with the Icon component, the plain lucide package is more similar to how FontAwesome works, though still different enough that it would still require new code paths.

In the lucide package, each icon is a 3-element array. The first element is the tag name to use (I assume always svg? But haven't looked).

The second element is the attributes to put on the tag. I haven't looked enough to see how much these tend to differ.

The third element is an array of the SVG elements to use. As you see in the example below from the User icon, this is not always a path.

[
    "svg",
    {
        "xmlns": "http://www.w3.org/2000/svg",
        "width": 24,
        "height": 24,
        "viewBox": "0 0 24 24",
        "fill": "none",
        "stroke": "currentColor",
        "stroke-width": 2,
        "stroke-linecap": "round",
        "stroke-linejoin": "round"
    },
    [
        [
            "path",
            {
                "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
            }
        ],
        [
            "circle",
            {
                "cx": "12",
                "cy": "7",
                "r": "4"
            }
        ]
    ]
]

It's theoretically possible that these can be recursive, and something like a <g> could be represented in the 3rd element by ["g", {}, [ subelements ] ]. But I haven't seen that occur in a brief perusal of the package, and given the relative simplicity of the icons here I wouldn't expect it.