美文网首页
vite+vue3 使用svg icon(包括element-p

vite+vue3 使用svg icon(包括element-p

作者: 新世界的冒险 | 来源:发表于2022-05-02 16:13 被阅读0次

    1、安装依赖

    npm i @element-plus/icons-vue -S
    npm i vite-plugin-svg-icons -D
    

    2、在vite.config.ts文件中

    import path from 'path';
    import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // 版本不同引入方式不同
    export default defineConfig({
      ...
      plugins: [
        ...
        createSvgIconsPlugin({
          // 指定需要缓存的图标文件夹
          iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
          // 指定symbolId格式
          symbolId: 'icon-[dir]-[name]'
        })
      ]
    });
    

    且按照iconDirs中路径准备好svg文件


    image.png

    3、创建引入全部element-plus文件,以及创建SvgIcon组件

    components文件夹下创建如下文件

    image.png
    components/SvgIcon/svgicon.ts文件内容如下
    // 注册所有 @element-plus/icons-vue 图标
    import * as ElementPlusIconsVue from '@element-plus/icons-vue';
    import { App } from 'vue';
    export default {
      install: (app: App<Element>) => {
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
          app.component(key, component);
        }
      }
    };
    

    components/SvgIcon/index.vue文件内容如下

    // 注册自定义图标
    <template>
      <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" :fill="color" />
      </svg>
    </template>
    
    <script setup lang="ts">
    import { computed } from 'vue';
    const props = defineProps({
      iconClass: { // 图标名称与assets/icon/svg下使用的文件名一致
        type: String,
        required: true
      },
      className: { // 给图标添加class
        type: String,
        default: ''
      },
      color: { // 设置图标颜色
        type: String,
        default: '#333'
      }
    });
    const iconName = computed(() => {
      return `#icon-${props.iconClass}`;
    });
    const svgClass = computed(() => {
      if (props.className) {
        return `svg-icon ${props.className}`;
      }
      return 'svg-icon';
    });
    </script>
    
    <style scope lang="scss">
    .sub-el-icon,
    .nav-icon {
      display: inline-block;
      font-size: 15px;
      margin-right: 12px;
      position: relative;
    }
    
    .svg-icon {
      width: 1em;
      height: 1em;
      position: relative;
      fill: currentColor;
      vertical-align: -2px;
    }
    </style>
    

    4、在main.ts中引入

    // 注册所有图标
    import 'virtual:svg-icons-register';  // 引入注册脚本
    import SvgIcon from '@/components/SvgIcon/index.vue';
    import elementIcons from '@/components/SvgIcon/svgicon';
    app.component('SvgIcon', SvgIcon);
    app.use(elementIcons);
    

    5、使用方法

    // 自定义的svg图标
    <svg-icon icon-class="lock" class="loack-icon"></svg-icon>
    
    // element-plus图标
    <el-icon><user-filled /></el-icon>
    

    相关文章

      网友评论

          本文标题:vite+vue3 使用svg icon(包括element-p

          本文链接:https://www.haomeiwen.com/subject/oofvyrtx.html