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