Rendu des images svg dans vue, emballage des composants (version vue+vite+ts)

第一步
npm 下载
  npm i vite-plugin-svg-icons -D
yarn下载
  yarn add vite-plugin-svg-icons -D

第二步在main.ts文件引入
// 引入svg注册脚本
import 'virtual:svg-icons-register'

第三步在项目中新建存放svg图片的文件夹

第四步 在vite.config.js 配置svg文件路径，以及规则
import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    
     ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
import {
    
    createSvgIconsPlugin} from 'vite-plugin-svg-icons'

export default defineConfig({
    
    
  resolve: {
    
    
    // Vite路径别名配置
    alias: {
    
    
      '@': path.resolve('./src'), // @代替src
    },
  },
  plugins: [

    AutoImport({
    
    
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    
    
      resolvers: [ElementPlusResolver()],
    }),
    vue(),
    createSvgIconsPlugin({
    
    
      // 配置svg文件路径
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式，规则
      symbolId: '[name]',
    })
  ],
});

第五步组件封装 src/components/SvgIcon.vue
<template>
  <svg aria-hidden="true" class="svg-icon">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

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

const props = defineProps({
    
    
  prefix: {
    
    
    type: String,
    default: 'icon',
  },
  iconClass: {
    
    
    type: String,
    required: false,
  },
  color: {
    
    
    type: String,
    default: '',
  },
});

const symbolId = computed(() => `#${
      
      props.iconClass}`);
</script>

<style scoped>
.svg-icon {
    
    
  width: 1em;
  height: 1em;
  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
  overflow: hidden;
}
</style>

Étape 6 importer à la demande

<template>
  <SvgIcon icon-class='Collection-off'/>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon.vue'

</script>


<style scoped>
.read-the-docs {
    
    
  color: #888;
}
</style>

全局引入方式
在main.ts里引入svg组件
import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import SvgIcon from '@/components/SvgIcon.vue'
// 引入svg注册脚本
import 'virtual:svg-icons-register';

// 注册全局组件
const app = createApp(App);
app.component('PxPagination', SvgIcon);
createApp(App).mount('#app')

utiliser

<template>
  <SvgIcon icon-class='Collection-off'/>
  <script setup lang="ts">
	// import SvgIcon from '@/components/SvgIcon.vue'
</script>
</template>

svg不显示的原因可参考以下几种：
1、是否在main.ts中引入注册脚本（参考第二步操作）
2、svg存放的文件路径是否和vite.config.js配置的路径相同（参考第三步，第四步）
3、svg组件封装 symbolId是否和vite.config.js配置的规则相同（参考第三步，第四步）