Skip to content

[src/ui/Icon.tsx] Icon path issue #1

Description

@oleksiykalashnyk

🧩 Icon path inconsistency between Sanity schema and UI component

Problem:
The Sanity icon schema currently saves only the raw Lucide icon name (e.g. "Activity"),
but the Icon component expects the full path format required by [ic0n.dev](https://github.com/nuotsu/ic0n.dev), including the icon set prefix and component name:

<img src="https://ic0n.dev/lu/LuActivity" alt="" />

Because of this mismatch, components like Feature.tsx must manually build the full ic0n value:

const icon: Sanity.Icon = {
  _type: "icon",
  ic0n: `lu/Lu${iconName}?hex=FFFFFF`,
  size: "32px",
};

This workaround introduces redundant logic and breaks consistency between Sanity data and the Icon component.


Reference:

https://github.com/nuotsu/ic0n.dev

<img src="https://ic0n.dev/<ICON_SET>/<ICON_NAME>" alt="" />


Improvement idea:

  • Add a color field (e.g. "color" or "hex") to the Sanity schema to control icon color.
  • Add a prefix (icon set) option or logic inside Icon to automatically prepend lu/Lu to short icon names (e.g. "Activity""lu/LuActivity").

Expected:

  • Schema and UI both use compatible ic0n formats.

  • Editors can choose icon color and optionally icon set.

  • The Icon component correctly builds URLs like:

    <img src="https://ic0n.dev/lu/LuActivity?hex=FFFFFF" alt="" />

Files affected:

  • src/sanity/schemaTypes/objects/icon.tsx
  • src/ui/Icon.tsx
  • src/ui/modules/Feature.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions