vue3.0中使用SvgIcon

由于vite不兼容require，导致vue2版本svg-sprite-loader插件失效，所以需要更换新的插件vite-plugin-svg-icons。

安装

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

配置 vite.config.ts

import viteSvgIcons from 'vite-plugin-svg-icons'
import path from 'path'
export default ({ mode }) => {
  const config = {
    plugins: [
      viteSvgIcons({
        iconDirs: [path.resolve(process.cwd(), 'src/icons')], 
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
  return config
}

src/icons 为svg 存放路径，可自行设置。

设置文件存放路径

main.ts 全局引入并注册组件

import 'vite-plugin-svg-icons/register';
import SvgIcon from './components/SvgIcon/index.vue'

const app = createApp(App)
app.component('SvgIcon', SvgIcon)

SvgIcon组件代码

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

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'SvgIcon',
    props: {
      iconClass: {
        type: String,
        required: true,
      },
      className: {
        type: String,
        default: '',
      },
    },
    computed: {
      iconName(): string {
        return `#icon-${this.iconClass}`
      },
      svgClass(): string {
        if (this.className) {
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      },
      styleExternalIcon(): {
        mask: string
        '-webkit-mask': string
      } {
        return {
          mask: `url(${this.iconClass}) no-repeat 50% 50%`,
          '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
        }
      },
    },
  })
</script>

<style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

使用方法

和以前一样没有变化

<template>
  <div class="main-container">
    <svg-icon icon-class="list" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'Home',
    setup() {
      return {}
    },
  })
</script>

版权声明：本文为CSDN博主「菜鸡前端一枚」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45952652/article/details/116449330