introduction

There are many places in the project that need to use svg icons. The Element Plus component library provides a set of commonly used icons, but it often cannot meet the needs. The Ali icon library is relatively complete on the Internet. The following describes how to use the svg in the Ali icon library Icons are imported into their own projects.

1. vite-plugin-svg-icons plugin

The project in this article is built using vue3+vite, and you can use the third-party vite-plugin-svg-icons plug-in to introduce svg icons.

Install

Install the vite-plugin-svg-icons plugin

# npm
npm i vite-plugin-svg-icons -D
# yarn
yarn add vite-plugin-svg-icons -D
# pnpm
pnpm install vite-plugin-svg-icons -D

configuration

Configure plugins in vite.config.ts

import {
    
     createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
    
    
  return {
    
    
    plugins: [
      createSvgIconsPlugin({
    
    
        // 图标文件夹为src/assets/icons
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
    ],
  }
}

Introduce the registration script in src/main.ts

import 'virtual:svg-icons-register'

2. Download the svg icon

1. Create a new icons directory under src/assets to store svg icons.
2. Enter the Ali icon library , find the desired svg icon, and download the svg.
insert image description here

insert image description here
3. Put the downloaded svg into the icon directory src/assets/icons.

3. Using svg icons

Package svg-icon component

On the iconfont official website, you can see the sample code for using svg:

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

If you use the above method every time, it will undoubtedly be very troublesome. You can package it into a component and import it directly where you need it.
Create a new SvgIcon directory under the components directory, and then create a new index.vue file.

<template>
  <svg aria-hidden="true" class="svg-icon" :width="width" :height="height">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup>
import {
    
     computed } from 'vue'
const props = defineProps({
    
    
  prefix: {
    
    
    type: String,
    default: 'icon'
  },
  name: {
    
    
    type: String,
    required: true
  },
  color: {
    
    
    type: String,
    default: '#333'
  },
  width: {
    
    
    type: String,
    default: '16px'
  },
  height: {
    
    
    type: String,
    default: '16px'
  }
})

const symbolId = computed(() => `#${
      
      props.prefix}-${
      
      props.name}`)
</script>

global registration

import svgIcon from "@/components/SvgIcon/index.vue";
const app = createApp(App)
app.component('SvgIcon', SvgIcon);

used in the component

Just pass in the name of the icon you want to use, and you can also pass in the color, width and height to define the style.

<template>
    <SvgIcon name="phone" color="pink" width="100px" height="100px"></SvgIcon>
</template>

Effect

insert image description here
Reference: https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md

Use svg icon in vue3+vite project