@surstromming/icon

Renders any lucide icon as an inline SVG.
726
vue vue3 ui icon design-system component-library shadcn scss css-modules
Install
npm install @surstromming/icon
Latest Version:0.1.0
Vue:3
License:MIT
Last Updated:Oct 17, 2026
Links: GitHub  ·  npm
Maintainer: evgeniy_mnatsakanov

@surstromming/icon

Renders any lucide icon as an inline SVG.

Dependency graph

graph LR
  icon["@surstromming/icon"]

Usage

Import icons from the lucide package and pass them to Icon:

<template>
  <Icon :icon="Search" :size="16" />
  <Icon :icon="Command" :size="20" :stroke-width="2.5" />
</template>

<script setup lang="ts">
import { Search, Command } from 'lucide'
import { Icon } from '@surstromming/icon'
</script>

Icon inherits colour via currentColor; size defaults to 1em (scales with the surrounding text). Pass a number for pixels, or size the <svg> from the parent's CSS (e.g. .btn svg { width: 1rem; height: 1rem; }) for a fixed size.

See packages/CONVENTIONS.md for authoring rules.

Related Packages

@surstromming/popover

Panel anchored under a trigger; closes on outside click and Escape.

1,481 0
component-library css-modules design-system scss shadcn ui vue vue3 popover
@surstromming/dialog

Modal dialog, with an alert-dialog mode and sheets on the screen's edges.

1,382 0
component-library css-modules design-system scss shadcn ui vue vue3 dialog
@surstromming/design

Everything related to design system, including colors, typography, and spacing.

1,363 0
component-library css-modules design-system scss shadcn ui vue vue3 design
@surstromming/select

Pick one option from a list.

1,171 0
component-library css-modules design-system scss shadcn ui vue vue3 select
@surstromming/scroll-area

A scroll container with an Edge-style overlay scrollbar.

1,157 0
component-library css-modules design-system scss shadcn ui vue vue3 scroll-area

Version History

Version Released Vue License
0.1.0 ^3.4.0 MIT