vite2-vue3-svg-plugin

特性:

• vite2 + vue3 + typescript

Currently supported Vite version:

2.1.5

Install

npm install @types/node vite --save

yarn add @types/node vite --save

Setup

//vite.config.js
import { svgBuilder } from 'vite2-vue3-svg-plugin';

export default defineConfig({
  plugins: [
    vue(),
    svgBuilder("./src/assets/icons/svg/"), //自行根据svg文件路径配置
  ],
});

Usage

SvgIcon.vue

<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
import { defineProps, computed } from "vue";

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: "",
  },
});

const iconName = computed(() => `#icon-${props.name}`);
const svgClass = computed(() => {
  console.log(props.name, "props.name");
  if (props.name) {
    return `svg-icon ${props.name}`;
    // return `svg-icon icon-${props.name}`
  }
  return "svg-icon";
});
</script>

<style lang="scss">
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

UseIcon.vue

<template>
  <div>
    <svg-icon name="close" color="#00ff00"></svg-icon>
  </div>
</template>

<script>
import svgIcon from './components/SvgIcon.vue'

export default {
components: {
   svg-icon:svgIcon
},
};
</script>