How to how to build a scalable svg icon component library in vue 3
- Step 1Export and clean icons from Figma — Export SVGs from Figma, run through JAD Metadata Scrubber and Minifier, and store in packages/icons/src/assets/. Keep naming consistent: kebab-case filenames.
- Step 2Batch generate Vue components — Run the JAD batch API to generate .vue SFC files. Each file should use script setup lang=ts and export typed width, height, and colour props.
- Step 3Publish and consume in Nuxt — Publish as @company/icons to npm. In your Nuxt 3 project, add to components: [{ path: '@company/icons/components', prefix: 'Icon' }] in nuxt.config.ts for auto-import.
Frequently asked questions
Should Vue icon components use defineProps or Options API props?+
Use defineProps in script setup — it's the Vue 3 standard with better TypeScript inference: const props = defineProps<{ size?: number; color?: string }>()
How do I make icons respond to Vue's theme colour without inline styles?+
Use CSS custom properties: set fill='var(--icon-color, currentColor)' in the SVG. Pass color as a prop and bind it: :style='{ "--icon-color": color }'. No inline fill attribute needed.
Can my Vue icon library be used in plain HTML without Vue?+
No — Vue SFCs require the Vue runtime. For a framework-agnostic icon library, generate web components (customElements API) from the same SVG sources.
How do I version the icon library when new icons are added?+
Follow semantic versioning: new icons are minor bumps, breaking prop interface changes are major, bug fixes are patches. Use changesets for automated versioning in monorepos.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.