@digitalwalletcorp/vue-svg-icons

Vue SVG Icons

A set of original SVG icons shipped directly as Vue 3 components. Includes independent interpretations of Unicode emoji characters as well as common UI icons.

Built entirely from basic SVG primitives with no <text> elements, every icon renders consistently across operating systems and browsers. Each design is drawn from scratch without embedding fonts or tracing existing emoji glyphs, so there are no font licensing dependencies.

Open the interactive demo to browse every icon and edit its props to see how it renders.

✨ Features

• Tree-shaking: Only import what you use. Importing a single icon won't bundle the rest of the library.
• SSR-safe: Fully compatible with server-side rendering. Animations safely trigger after mounting.
• Scales with text: Defaults to 1.2em in size, naturally matching surrounding inline text without extra CSS.
• Collision-free IDs: Components utilizing gradients or clipping paths use isolated element IDs, preventing display bugs when rendering multiple identical icons on the same page.
• Peer dependency: Requires Vue 3.5 or later.

📦 Installation

npm install @digitalwalletcorp/vue-svg-icons
# or
yarn add @digitalwalletcorp/vue-svg-icons

⚠️ Requirements

• Vue 3.5.0+: This library uses Vue's built-in useId() helper to generate unique element IDs, requiring Vue 3.5.0 or later.

📖 Usage

There are three ways to use the icons. Choose the one that best fits your project.

Note: In Nuxt, icons are registered globally, but only the icons actually used in your templates are included in the bundle.

1. Import icons individually

Import the icons you need in each file and use them in your template.

<script setup lang="ts">
import {
  SvgWhiteHeavyCheckMark,
  SvgDownload,
  SvgChevron,
  SvgClock,
  SvgCalendar
} from '@digitalwalletcorp/vue-svg-icons';
</script>

<template>
  <p>Upload finished <SvgWhiteHeavyCheckMark /></p>
  <SvgDownload :size="20" color="#c0392b" />
  <SvgChevron direction="up" />
  <SvgClock :hour="9" :minute="41" :duration="60" />
  <SvgCalendar date="20260920" :duration="3" />
</template>

2. Register all icons globally (Vue)

Call registerIcons() once when you create the app. All icons then become available in any template without importing them.

// main.ts
import { createApp } from 'vue';
import { registerIcons } from '@digitalwalletcorp/vue-svg-icons/register';
import App from './App.vue';

const app = createApp(App);
registerIcons(app);
app.mount('#app');

<template>
  <!-- no import needed -->
  <SvgDownload :size="20" color="#c0392b" />
  <SvgChevron direction="up" />
</template>

This registers every icon, so all icons are included in the bundle. If bundle size matters, import icons individually instead.

3. Register icons globally (Nuxt)

Add the Nuxt module to nuxt.config.ts. Icons are automatically available in any template without imports, and no additional type setup is required.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@digitalwalletcorp/vue-svg-icons/nuxt']
});

<template>
  <!-- no import needed -->
  <SvgDownload :size="20" color="#c0392b" />
  <SvgChevron direction="up" />
</template>

📐 Stylesheet

Since v1.9.0, every icon renders its root <svg> with the svg-inline--vue-svg-icons class. Importing the bundled stylesheet is recommended. Without it, icons default to sitting on the text baseline, causing them to appear awkwardly high relative to surrounding text.

• Vue: Import in your entry file.

// main.ts
import '@digitalwalletcorp/vue-svg-icons/style.css';

• Nuxt: Add to your config array.

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['@digitalwalletcorp/vue-svg-icons/style.css']
});

• Consistent Positioning: The stylesheet dynamically applies vertical-align based on the icon's size, ensuring alignment stays consistent whenever you change sizes.
• CJK Text Alignment: Offsets are calculated using Latin font metrics. When paired with CJK (Chinese, Japanese, Korean) characters, icons may appear slightly low.
• Easy Overrides: Rules use zero specificity (:where()), making it effortless to override them with your custom CSS whenever needed.

💡 Recommended: Align via Flex Container

For UI components like buttons and badges where icons and text must line up precisely, setting the parent as an inline-flex container is the most reliable approach:

.label {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

Key Takeaways:

• Flexbox overrides baseline styles: vertical-align is ignored inside a flex context, so this won't conflict with the library's stylesheet.
• Requires gap: Flex containers ignore HTML white-space rules, so use gap to define spacing between the icon and text.
• Stylesheet optional: If every icon in your application is rendered inside a flex container, importing the bundled CSS is not required.

When NOT to use Flexbox:

• When text wraps onto multiple lines and the icon must stay aligned with the first line.
• When inserting an icon directly inside a standard paragraph of inline text.

In these scenarios, rely on vertical-align and standard inline rendering instead.

🔧 Props

All icons accept the size and title props. See the Props table below for icon-specific properties.

Note: Default values vary per icon.

📚 Icon Catalog

Unicode Emoji Icons

Original UI Icons

Standalone UI icons with no direct emoji counterparts.

🎨 Artwork & Copyright

• All icons in this package are original SVG artwork drawn from scratch with assistance from generative AI.
• The icons are independently drawn and do not trace or incorporate artwork from existing emoji fonts or icon sets.
• Contains no embedded <text> elements or font outlines; all text-like elements are rendered strictly as SVG paths.
• Component naming follows formal character names from the official Unicode Character Database.
• The package is released under the MIT License. No copyright is asserted over the icon artwork itself, and you are free to use, modify, and redistribute the artwork without attribution.

📜 License

Licensed under the MIT License.