Vue SVG Icons

A Vue 3 web component for rendering SVG icons. This package allows you to easily use SVG icons in your Vue applications. The component dynamically loads SVG icons based on the provided icon name and renders them in the Shadow DOM.

Installation

First, install the package via npm:

npm install vue3-svg-icons --save

Usage

Define the custom element in your main JavaScript or TypeScript file:

import { defineIconSvg } from "vue3-svg-icons";

defineIconSvg();

Then, use the custom element in your Vue components:

<template>
  <div>
    <icon-svg icon-name="home" width="48px" height="48px"></icon-svg>
  </div>
</template>

Or if you want to use your own tagName, you can define it like this:

import { defineIconSvg } from "vue3-svg-icons";

defineIconSvg("my-icon-tag");

Then, use the custom element with your own tagName in your Vue components:

<template>
  <div>
    <my-icon-tag icon-name="home" width="48px" height="48px"></my-icon-tag>
  </div>
</template>

Props

• iconName (required): The name of the icon to be displayed. This should correspond to the SVG file name without the .svg extension.
• width (optional): The width of the icon. Default is 24px.
• height (optional): The height of the icon. Default is 24px.

Using Custom Icons

You can also use your own icons by adding them to the @/assets/icons directory in your project. Ensure the SVG files are named appropriately, and you can reference them just like the built-in icons.

For example, if you add an SVG file named custom-icon.svg to @/assets/icons, you can use it as follows:

<template>
  <div>
    <icon-svg icon-name="custom-icon" width="32px" height="32px"></icon-svg>
  </div>
</template>

Icons List

The following icons are available in this package:

• arr
• arr-l
• burger
• cashier
• checkBox
• close
• close-bold
• coins
• eye
• eye-off
• filter
• flag_de-DE
• flag_en-US
• flag_es-ES
• flag_fr-FR
• flag_hi-IN
• flag_hu-HU
• game
• grid2
• home
• login
• logout
• mail
• play
• plus
• promotion
• restart
• search
• select
• social_facebook
• social_instagram
• social_x
• star
• star-stroke
• support
• timer
• user
• vip
• wallet

Example

Here is an example of how to use different icons with the IconSvg component:

<template>
  <div>
    <icon-svg icon-name="search" width="32px" height="32px"></icon-svg>
    <icon-svg icon-name="user" width="48px" height="48px"></icon-svg>
    <icon-svg icon-name="logout" width="24px" height="24px"></icon-svg>
  </div>
</template>