Vue使用svg图片-svg-sprite-loader插件

  • 需求:设计给的一个按钮图标是svg的,不是element自带的图标
  • 使用插件svg-sprite-loader

svg-sprite-loader

  • 什么是svg-sprite-loader?
    将多个 svg 打包成 svg-sprite。svg 雪碧图。类似于 CSS 中的 Sprite 技术。图标图形整合在 一起,实际呈现的时候准确显示特定图标。
    在 vue2 配合 webpack;svg图片不存在id冲突,在使用时无需显示引入svg图片,大大提高开发效率
  • 本人环境:vue2

安装及使用

  • 安装/下载依赖

    npm install svg-sprite-loader -D
    
  • svg-sprite-loader 配置:在vue.config.js中配置

    // vue.config.js文件
    
    // 导入模块
    const path = require('path')
    // 获取路径
    function resolve (dir) {
      return path.join(__dirname, dir)
    }
    // 配置
    module.exports = {
    	//...
      chainWebpack(config) {
        config.plugins.delete('preload') // TODO: need test
        config.plugins.delete('prefetch') // TODO: need test
    
        // set svg-sprite-loader
        config.module
          .rule('svg')
          .exclude.add(resolve('src/assets/icons'))
          .end()
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(resolve('src/assets/icons'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
          .end()}
    
  • 创建svgIcon插件

    • 步骤

      1. src下的assets下创建icons文件夹(位置:不固定,我是创建assets下(放这类的图片啥的))
      2. icons下创建index.js
    • -Vue使用svg图片-svg-sprite-loader插件_第1张图片

      // icons/index.js
      import Vue from 'vue'
      import SvgIcon from '@/components/SvgIcon'// 封装的svgIon组件
      
      // register globally
      Vue.component('svg-icon', SvgIcon)
      // 统一批量引入
      const req = require.context('./svg', false, /\.svg$/) // ./svg -> svg文件所在路径
      const requireAll = requireContext => requireContext.keys().map(requireContext)
      requireAll(req)
      
      
    • 在icons下创建 svg文件夹 管理所有的svg文件
      在这里插入图片描述

  • 封装 svg-icon 全局组件

    • components 下创建 SvgIcon 组件(component专门放共用组件的)

      <template>
        <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
        <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
          <use :xlink:href="iconName" />
        </svg>
      </template>
      
      <script>
      import { isExternal } from '@/utils/validate'
      
      export default {
        name: 'SvgIcon',
        props: {
          iconClass: {
            type: String,
            required: true
          },
          className: {
            type: String,
            default: ''
          }
        },
        computed: {
          isExternal() {
            return isExternal(this.iconClass)
          },
          iconName() {
            return `#icon-${this.iconClass}`
          },
          svgClass() {
            if (this.className) {
              return 'svg-icon ' + this.className
            } else {
              return 'svg-icon'
            }
          },
          styleExternalIcon() {
            return {
              mask: `url(${this.iconClass}) no-repeat 50% 50%`,
              '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
            }
          }
        }
      }
      </script>
      
      <style scoped>
      .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
      
      .svg-external-icon {
        background-color: currentColor;
        mask-size: cover!important;
        display: inline-block;
      }
      </style>
      
      
  • External 方法

export function isExternal (path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
  • main.js 中注册插件
import './assets/icons' // icon
// 或者
import svgIconPlugin from '@/icons/index.js'
Vue.use(svgIconPlugin)
  • 使用

    • icon-class的值就等于你在assets/icons/svg下的存的那些svg文件的名称,如我方了一个404.svg所以 icon-class=“404”
    <template>
      <div>
        <svg-icon icon-class="404" class="fs20" />
      </div>
    </template>
    
    

你可能感兴趣的:(UI组件二改,svg,vue.js,前端,javascript)