vue3.0+ts+vite+svg

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

使用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

 

以上是 vue3.0+ts+vite+svg 的全部内容， 来源链接： utcz.com/z/378228.html

回到顶部