vue3+vite 中自定义 svg 图片 icon-526互联

关于 vue3 + vite 开发一个管理后台，并在后台中使用自定义的 svg 图片左右路由icon

安装依赖

npm i vite-plugin-svg-icons --D

或者

yarn add vite-plugin-svg-icons --D 等其它的安装工具

配置相关的 vite 配置

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

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

引入相关的依赖并创建组件

main.ts
```
  import 'virtual:svg-icons-register'
```

自定义组件同时使用 element plus 图标

  <template>
    <template v-if="getIconName.includes('ele-')">
     <i
        :class="getIconName"
        class="el-icon sub-el-icon"
      >
        <component :is="getIconName" />
      </i>
    </template>
    <template v-else>
      <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
        <use :xlink:href="symbolId" :fill="props.color" />
      </svg>
    <template>
  </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'
    },
    size: {
      type: String,
      default: '1em'
    }
  })

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

<style lang="scss" scoped>
  .sub-el-icon {
    color: currentColor;
    display: inline-block;
    width: 14px;
    height: 14px;
    font-size: 16px;
    margin-right: 5px;
  }
</style>

全局注册

  import svgIcon from "@/components/SvgIcon/index.vue"

  createApp(App)
  .component('svg-icon', svgIcon)
  .mount('#app')

使用

  <svg-icon v-if="props.icon" :name="props.icon" />

element-icon element vue3 icon