• Vue项目使用SVG矢量图型基础步骤


    什么是svg

    可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。

    优势:

    • SVG 可被非常多的工具读取和修改(比如记事本)
    • SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
    • SVG 是可伸缩的
    • SVG 图像可在任何的分辨率下被高质量地打印
    • SVG 可在图像质量不下降的情况下被放大
    • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
    • SVG 可以与 Java 技术一起运行
    • SVG 是开放的标准
    • SVG 文件是纯粹的 XML
    • 还能基于 DOM 模型实现动态和一些交互功能

    1.svg-icon的配置

    • 安装依赖
    npm i svg-sprite-loader
    
    • 1
    • 在vue.config.js中配置
    const path = require('path')
    
    function resolve(dir) {
      return path.join(__dirname, dir)
    }
    module.exports = {
      chainWebpack(config) {
        // set svg-sprite-loader
        config.module
          .rule('svg')
          .exclude.add(resolve('src/icons'))
          .end()
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(resolve('src/icons'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
          .end()
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    2.在src目录下创建 icons文件夹

    • 1.写于 svg 和 index.js 文件
      在这里插入图片描述
    • 2.在 index.js 写入以下代码
    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'// svg component 注册的svg全局组件
    
    // register globally
    Vue.component('svg-icon', SvgIcon) // 全局注册SvgIcon组件
    
    const req = require.context('./svg', false, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)
    // const result = requireAll(req) 
    // console.log('result>>>>>>>>',result); // 可以打印遍历的所有svg适量图形
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 3.可以通过iconfont-阿里巴巴矢量图标库 去下载你要用的svg,复制地址并写入svg中
      在这里插入图片描述
    • 4.在components文件创建SvgIcon组件
      在这里插入图片描述
    <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>
    // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
    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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    4.其他配置及引入

    • 1.在 utils 目录下配置 validate.js 文件配置
    /**
     * @param {string} path
     * @returns {Boolean}
     */
    export function isExternal(path) {
      return /^(https?:|mailto:|tel:)/.test(path)
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 2.在main.js入口文件中全局引入
    import './icons' // icon
    
    • 1

    在这里插入图片描述

    4.在项目中使用

    使用格式 ,这里的文件名就是在src/icons/svg下的文件名

     <svg-icon icon-class="peoples" class-name="card-panel-icon" />
    
    • 1
  • 相关阅读:
    C - Bound Found
    【计算机视觉】图像预处理
    真·Redis缓存优化—97%的优化率你见过嘛? | 京东云技术团队
    linux杀毒软件clamav安装
    c语言结构体定义和结构体数组第一部分笔记
    曲线艺术编程 coding curves 第十章 螺旋曲线(SPIRALS)
    软考 系统架构设计师系列知识点之特定领域软件体系结构DSSA(7)
    redis 分布式锁
    JAVA转GO
    内网渗透-横向移动外部工具的使用
  • 原文地址:https://blog.csdn.net/AKindofo/article/details/126839788