Skip to content

Replace inline SVG blocks with Lucide icon components #75

Description

@zindello

Summary

A compliance sweep against the project's SPEC.md identified inline `` blocks in multiple components that should be replaced with Lucide icon components per coding standards.

Files with violations

  • `src/components/ui/NeighborMenu.vue` (4 instances)
  • `src/components/ui/TreeNode.vue` (multiple — region/key icons)
  • `src/components/configuration/RepeaterSettings.vue`
  • `src/components/tables/PacketTable.vue`
  • `src/components/configuration/MemoryDebug.vue` (including SVGs injected as raw HTML strings)
  • `src/components/configuration/DatabaseManagement.vue`
  • `src/components/configuration/WebSettings.vue`
  • `src/components/configuration/APITokens.vue`
  • `src/components/configuration/TransportKeys.vue`
  • `src/components/configuration/LetsMeshSettings.vue`

Rule (from SPEC.md)

Always use Lucide (`@lucide/vue`) for icons. Never draw inline `` blocks unless the icon provably does not exist in Lucide — check lucide.dev/icons first.

Before fixing

Each inline SVG must be cross-checked against lucide.dev/icons to confirm an equivalent exists. Some may be legitimate exceptions (custom shapes, brand icons) — document any without a Lucide equivalent in SPEC.md under Documented Exceptions.

Special case: `MemoryDebug.vue` injects SVGs as raw HTML strings inside a JS function — these cannot be replaced with a component reference directly and need a different approach (e.g. conditional render via v-html or restructuring the render function).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions