• 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

     
  • 相关阅读:
    Kafka生产者Producer配置 ,及C#中使用学习资料连接
    Oracle expdb异地备份
    查询redis当前连接数据和当前信息
    Oracle在sqldeveloper中按格式显示日期数据
    DB行转列
    2019.9.10面试反思
    配置webpack4
    代理
    es6 promise
    es6 symbol
  • 原文地址:https://www.cnblogs.com/nanamiao/p/15308432.html
Copyright © 2020-2023  润新知