vue3+vite 引用svg图标

最新推荐文章于 2025-07-25 14:57:16 发布

来一杯冰可罗

最新推荐文章于 2025-07-25 14:57:16 发布

阅读量581

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/foreverhui/article/details/142850499

首先通过npm安装所需依赖，然后在vite.config.ts中配置插件。接着封装svg-icon组件，并在main.ts中全局注册。最后，在.vue文件中使用该组件。注意解决svg-icon颜色无法修改的问题，需确保SVG图片中移除fill属性。
1、安装依赖插件vite-plugin-svg-icons和fast-glob

npm install vite-plugin-svg-icons --save 

npm install fast-glob --save

2、在vite.config.ts文件修改配置

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
import { resolve } from 'path'
  plugins: [
    vue(),
    eslintPlugin(),
    createSvgIconsPlugin({
      // 需要自动导入的 svg 文件目录（可修改）
      iconDirs: [resolve(process.cwd(), 'src/assets/svgIcon/svg')],
      // 执行icon name的格式（可修改）
      symbolId: 'icon-[name]'
    })
  ],

3、创建SvgIcon.vue

// SvgIcon.vue

<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
  iconClass: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: ''
  },
  iconColor: {
    type: String,
    default: ''
  }
})
const iconName = computed(() => `#icon-${props.iconClass}`)
const svgClass = computed(() => {
  if(props.iconClass) {
    return `svg-icon icon-${props.iconClass}`
  }
  return 'svg-icon'
})
</script>

 <template>
      <svg :class="svgClass" aria-hidden="true">
         <use :xlink:href="iconName" :fill="iconColor"/>
     </svg>
 </template>

 <style lang="scss" scoped>
.svg-icon {
    width: 22px;
    height: 22px;
    vertical-align: -6px;
    fill: currentColor;
    overflow: hidden;
}
</style>

4、在main.ts文件全局注册

// svg 精灵图
import 'virtual:svg-icons-register'
import SvgIcon from './icons/SvgIcon.vue'
//注意上面两个都要导入，才可以正确的使用！！！

const app = createApp(App);
app.component('svg-icon', SvgIcon) // 全局挂载组件