Skip to content

Lucide Icon Support #322

Closed
Closed
@dimfeld

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions