美文网首页
封装svg组件

封装svg组件

作者: haha2333 | 来源:发表于2020-07-18 11:49 被阅读0次
    1. svg图标的使用
      基于这次项目的图标使用本地的svg图片。普通的使用方式
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" />
    </svg>
    

    避免每次写这三行代码,封装一个svg组件

    !important 本次项目基于cli4

    1⃣️ 项目文件夹结构


    image.png

    2⃣️ 封装svg组件,暴露class-name样式接口,引入svg文件名接口 icon-class

    <template>
      <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" />
      </svg>
    </template>
    <script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator'
    
    @Component
    export default class SvgIcon extends Vue {
      @Prop() private iconClass!: string
      @Prop() private className!: string
      get iconName () {
        return `#icon-${this.iconClass}`
      }
    
      get svgClass () {
        if (this.className) {
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      }
    }
    </script>
    <style lang="scss" scoped>
      .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    </style>
    

    3⃣️ 通过svg-sprite-loader处理svg文件实现一次性导出svg文件夹下的svg图标,
    (loader配置需要自行在项目根目录下创建vue.config.js文件,因为cli4为了简化工程目录,不再自动生成build文件夹)

    const path = require('path')
    function resolve (dir) {
      return path.join(__dirname, './', dir)
    }
    module.exports = {
      chainWebpack: config => {
        const svgRule = config.module.rule('svg') // 找到svg-loader
        svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
        svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
        svgRule // 添加svg新的loader处理
          .test(/\.svg$/)
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
    
        // 修改images loader 添加svg处理
        const imagesRule = config.module.rule('images')
        imagesRule.exclude.add(resolve('src/icons'))
        config.module
          .rule('images')
          .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      },
        // 全局绑定scss样式
      css: {
        loaderOptions: {
          sass: {
            prependData: '@import \'./src/styles/global\';'
          }
        }
      }
    }
    
    

    4⃣️ icons文件夹下新建index.js,用于批量读取svg文件,导出requireAll

    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon' // svg组件
    
    // 注册到全局
    Vue.component('svg-icon', SvgIcon)
    
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    const req = require.context('./svg', false, /\.svg$/)
    export default requireAll(req)
    

    5⃣️ 在main.ts中引用

    import icon from '@/isons'
    

    本次知识点
    vue一次性导出文件

    相关文章

      网友评论

          本文标题:封装svg组件

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