From 25fddd2afe811e9e65f32b854a3bdb66547bf106 Mon Sep 17 00:00:00 2001
From: Your Name <josip.jureta@gmail.com>
Date: Mon, 27 Jul 2026 19:03:59 -0400
Subject: [PATCH] feat(ui): add inline Icon component for themeable feather
 icons

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 n-link-core/components/Icon.spec.ts | 22 ++++++++++++++++++++++
 n-link-core/components/Icon.vue     | 21 +++++++++++++++++++++
 n-link-core/package.json            |  3 +++
 package-lock.json                   |  3 +++
 4 files changed, 49 insertions(+)
 create mode 100644 n-link-core/components/Icon.spec.ts
 create mode 100644 n-link-core/components/Icon.vue

diff --git a/n-link-core/components/Icon.spec.ts b/n-link-core/components/Icon.spec.ts
new file mode 100644
index 0000000..f1e2b88
--- /dev/null
+++ b/n-link-core/components/Icon.spec.ts
@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Icon from './Icon.vue';
+
+describe('Icon', () => {
+  it('renders an inline svg that inherits currentColor', () => {
+    const wrapper = mount(Icon, { props: { name: 'refresh-cw' } });
+    expect(wrapper.html()).toContain('<svg');
+    expect(wrapper.html()).toContain('currentColor');
+  });
+
+  it('applies the size to width and height', () => {
+    const wrapper = mount(Icon, { props: { name: 'chevron-right', size: 32 } });
+    expect(wrapper.html()).toContain('width="32"');
+    expect(wrapper.html()).toContain('height="32"');
+  });
+
+  it('throws for an unknown icon name', () => {
+    expect(() => mount(Icon, { props: { name: 'not-a-real-icon' } }))
+      .toThrow(/unknown feather icon/);
+  });
+});
diff --git a/n-link-core/components/Icon.vue b/n-link-core/components/Icon.vue
new file mode 100644
index 0000000..708ed60
--- /dev/null
+++ b/n-link-core/components/Icon.vue
@@ -0,0 +1,21 @@
+<template>
+  <span class="inline-flex items-center" v-html="svg"/>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import feather from 'feather-icons';
+
+const props = withDefaults(defineProps<{
+  name: string;
+  size?: number;
+}>(), {
+  size: 20,
+});
+
+const svg = computed(() => {
+  const icon = feather.icons[props.name as keyof typeof feather.icons];
+  if (!icon) throw new Error(`unknown feather icon: ${props.name}`);
+  return icon.toSvg({ width: props.size, height: props.size });
+});
+</script>
diff --git a/n-link-core/package.json b/n-link-core/package.json
index 693d02c..9967652 100644
--- a/n-link-core/package.json
+++ b/n-link-core/package.json
@@ -1,6 +1,9 @@
 {
   "name": "n-link-core",
   "version": "0.0.0",
+  "dependencies": {
+    "feather-icons": "^4.29.2"
+  },
   "peerDependencies": {
     "element-plus": "^2.14.3",
     "vue": "^3.5.40"
diff --git a/package-lock.json b/package-lock.json
index cdc6706..4d0de5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,9 @@
     },
     "n-link-core": {
       "version": "0.0.0",
+      "dependencies": {
+        "feather-icons": "^4.29.2"
+      },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.11",
         "tailwindcss": "^3.4.19"