Vite2+Vue3.2+整合svg

安装vite-plugin-svg-icons插件

yarn add vite-plugin-svg-icons -D

vite.config.ts文件配置

iconDirs设置svg文件位置；
symbolId设置svg名字

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [pathResolve('src/svg/icon')],
      symbolId: 'icon-[dir]-[name]',
      inject: 'body-last',//body-last|body-first默认body-last
      customDomId: '__svg__icons__dom__', //默认__svg__icons__dom__
    }),
  ],
}

main.ts中添加配置

import 'virtual:svg-icons-register'

创建svgIcon.vue文件

<template>
  <svg aria-hidden="true">
    <use :href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface SvgInfo {
  prefix?: string;
  name: string;
  color?: string;
}

const props = withDefaults(defineProps<SvgInfo>(), {
  prefix: "icon",
  color: "#333",
});

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

console.log("symbolId:" + symbolId);

const color = computed(() => props.color);
</script>

应用svgIcon.vue组件

<template>
  <svgIcon
    name="gitee"
    @click.native="goto"
    style="width: 1.5em; height: 1.5em; font-size: 18px; cursor: pointer"
    color="hotpink"
  ></svgIcon>
</template>

<script setup>
import svgIcon from "@/views/common/svgIcon.vue";
import Icon from "@ant-design/icons-vue";
const url = "https://github.com/AlexhahahaDrag/alex_blog.git";
const goto = () => {
  window.open(url);
};
</script

至此就可以完美在项目中使用svg了。
项目地址

最后

以上就是风趣小蘑菇为你收集整理的Vite2+Vue3.2+整合svg的全部内容，希望文章能够帮你解决Vite2+Vue3.2+整合svg所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。