vue3.0+ts+vite+svg

使用vite搭建的vue3.0 ts項目中使用svg圖標方法：
1，安裝 vite-plugin-svg-icons

npm i vite-plugin-svg-icons -D

2，vite.config.ts 中的配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteSvgIcons from 'vite-plugin-svg-icons';
import path from 'path'; 
export default defineConfig({
  plugins: [
      vue(),
   
    /**
     *  把src/icons 下的所有svg 自動加載到body下，供組件使用
     */
     viteSvgIcons({
        // 指定需要緩存的圖標文件夾，地址可改
        iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
      }),
    ]
})

3，在 src/main.ts 內引入注冊腳本

import 'virtual:svg-icons-register';

4，封裝svg-icon組件：/src/components/SvgIcon.vue

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

<script>
  import { defineComponent, computed } from 'vue';

  export default defineComponent({
    name: 'SvgIcon',
    props: {
      prefix: {
        type: String,
        default: 'icon',
      },
      name: {
        type: String,
        required: true,
      },
      color: {
        type: String,
        default: '#333',
      },
    },
    setup(props) {
      const symbolId = computed(() => `#${props.prefix}-${props.name}`);
      return { symbolId };
    },
  });
</script>

5，使用 ，如app組件中：/src/App.vue

<template>
  <div>
    <SvgIcon name="icon1"></SvgIcon>
    <SvgIcon name="icon2"></SvgIcon>
    <SvgIcon name="icon3"></SvgIcon>
    <SvgIcon name="dir-icon1"></SvgIcon>
  </div>
</template>

<script>
  import { defineComponent, computed } from 'vue';

  import SvgIcon from './components/SvgIcon.vue';
  export default defineComponent({
    name: 'App',
    components: { SvgIcon },
  });
</script>

注：icon1，icon2 等是放在src/assets/svg文件夾下的icon1.svg ，icon2.svg 文件。

問題：想實現一張大的svg圖全屏的效果，尺寸卻是很小，無論怎么控制width，也全屏不了

 

 待后續解決之后補充。

 

 

原文鏈接：https://github.com/anncwb/vite-plugin-svg-icons/blob/main/README.zh_CN.md