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
    • -请添加图片描述

      // 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>
    
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/349940.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

爆火《幻兽帕鲁》被指用AI缝合宝可梦,开发者自曝传奇经历:是人类的奇迹

梦晨 克雷西 发自 凹非寺 量子位 | 公众号 QbitAI 4天卖出600万份&#xff0c;爆火游戏《幻兽帕鲁》最高180万人同时在线&#xff0c;直接登顶。 这个成绩&#xff0c;甚至在整个Steam游戏平台历史上也能排到第二&#xff0c;连平台自家王牌CS2都被挤下去了。 同时&#xff0…

NGINX如何实现rtmp推流服务

最近直播大火&#xff0c;直播推流软件遍地开花&#xff0c;那么用NGINX如何进行推流呢&#xff1f;下面我们就简单的介绍一下用NGINX的rtmp模块如何实现视频推流&#xff0c;我们主要从一下几点介绍&#xff1a; 推流拉流推流认证拉流认证 package mainimport ("fmt&qu…

[MQ]常用的mq产品图形管理web界面或客户端

一、MQ介绍 1.1 定义 MQ全称为Message Queue&#xff0c;消息队列是应用程序和应用程序之间的通信方法。 如果非要用一个定义来概括只能是抽象出来一些概念&#xff0c;概括为跨服务之间传递信息的软件。 1.2 MQ产品 较为成熟的MQ产品&#xff1a;IBMMQ&#xff08;IBM We…

公司内网虚拟机中穿透服务器Coturn的搭建

1. 写在前面 coturn服务器的搭建文章已经非常多&#xff0c;但是对于对linux不熟悉的人来说排查错误的文章不多&#xff0c;此篇文章把我这次搭建过程以及如何排查问题做一个梳理我这里是在oracle vm虚拟机中搭建安装的ubuntu&#xff0c;通过H3C路由器映射到外网以下介绍我只…

SpringBoot的默认组件扫描

本篇博客主要探究&#xff1a;为什么SpringBoot项目中我们没有配置组件扫描的包&#xff0c;为什么它会默认扫描启动类所在的包&#xff1f; 一、访问与启动类所在同一包下的接口 我们先来看一个简单的接口&#xff1a; 我们可以观察到&#xff0c;HelloController这个类处在…

Linux中LVM实验

LVM实验&#xff1a; 1、分区 -L是大小的意思-n名称的意思 从vg0&#xff08;卷组&#xff09;分出来 2、格式化LV逻辑卷 LVM扩容 如果icdir空间不够了&#xff0c; 扩展空间lvextend -L 5G /dev/vg0/lv1 /dev/vg0/lv1(pp,vg,lv) 刷新文件系统xfs_growfs /lvdir VG扩容 …

阿里云快速搭建《幻兽帕鲁》服务器自建指南

如何自建幻兽帕鲁服务器&#xff1f;基于阿里云服务器搭建幻兽帕鲁palworld服务器教程来了&#xff0c;一看就懂系列。本文是利用OOS中幻兽帕鲁扩展程序来一键部署幻兽帕鲁服务器&#xff0c;阿里云百科aliyunbaike.com分享官方基于阿里云服务器快速创建幻兽帕鲁服务器教程&…

【华为云-云驻共创】数据高速公路—数仓集群通信技术详解

【摘要】本文讲解GaussDB&#xff08;DWS&#xff09;集群通信技术如何在大规模集群中承载高并发业务&#xff0c;如何实现高性能分布式通信系统。主要讲述客户端、CN、DN三类进程间的通信原理和流程&#xff0c;分为CN通信框架和DN间通信框架。 数据仓库服务GaussDB&#xff0…

伊恩·斯图尔特《改变世界的17个方程》薛定谔方程笔记

想法是等这学期学到薛定谔方程后再把整份完善下。 它告诉我们什么&#xff1f; 这个方程不是把物质作为粒子&#xff0c;而是作为波&#xff0c;并描述这样的波如何传播。 为什么重要&#xff1f; 薛定谔方程是量子力学的基础&#xff0c;它与广义相对论一起构成了当今最有效的…

【CKA认证考试参考题库及万字详解】

目录 【CKA认证考试参考题库及详解】说明题库总结第1题&#xff1a;节点排障1. 分值权重&#xff1a;13%2. 考题内容2.1 设置配置环境2.2 Context2.3 Task 3. 考点解析4. 考点参考链接5. 操作命令和结果5.1 必背操作命令5.2 详细操作步骤和结果 6. 验证命令和结果 第2题&#x…

近期孩子燃放烟花已引发多起火灾 富维图像烟火识别来揭秘

家长们&#xff0c;请注意&#xff01;最近有报道称&#xff0c;孩子们燃放烟花引发了多起火灾。 相关案例1 1月4日&#xff0c;浙江嘉兴海盐武原街道一小区内一名12岁的男孩在楼下燃放烟花&#xff0c;只见烟花点着后&#xff0c;突然“腾空而起”飞入五楼住户的阳台。所幸扑…

【doghead】2: 数据产生及pacing发送

默认采用fake的数据生产者 FakeDataProducer也可以读取h264文件生成:H264FileDataProducerUSE_FAKE_DATA_PRODUCER G:\CDN\BWE-DEV\Bifrost\worker\src\bifrost\bifrost_send_algorithm\bifrost_pacer.cpp FakeDataProducer 生产制造rtp包 ExperimentDumpData : 可用带宽、发…

Jellyfin影音服务本地部署并结合内网穿透实现公网访问本地资源

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及&#xff0c;各种各样的使用需求也被开发出来&…

EchoLink Launchpad在LBank圆满结束,投资额超过1.3亿 USDT,$ECHO即将上线

继ACGN Protocol的成功之后&#xff0c;LBank刚刚结束了其第四期LaunchPad——EchoLink。这个项目在去中心化物理基础设施网络&#xff08;DePIN&#xff09;和物联网&#xff08;IoT&#xff09;领域标志着重要的进步&#xff0c;利用独特的设备工作证明&#xff08;PoDW&…

PMP考试中问题的解决方法

PMP考试中的题型越来越倾向于情景题。特别是题干当中描述一个问题&#xff0c;问项目经理如何解决。大家有时候可能摸不着头脑&#xff0c;因此有必要给大家做个总结。 第一种方法&#xff1a;DMAIC 也就是六西格玛项目的模式。 D&#xff1a;Define&#xff0c;也就是首先要…

易点易动设备管理系统的移动应用:在任何时间、任何地点管理设备

随着科技的不断进步&#xff0c;移动应用已经成为了现代商业环境中不可或缺的一部分。企业需要能够随时随地管理和监控设备&#xff0c;以提高效率、降低成本并确保设备的正常运行。易点易动设备管理系统的移动应用为企业提供了便捷的解决方案&#xff0c;使设备管理变得更加灵…

1031 查验身份证 (15)

一个合法的身份证号码由17位地区、日期编号和顺序编号加1位校验码组成。校验码的计算规则如下&#xff1a; 首先对前17位数字加权求和&#xff0c;权重分配为&#xff1a;{7&#xff0c;9&#xff0c;10&#xff0c;5&#xff0c;8&#xff0c;4&#xff0c;2&#xff0c;1&am…

将 Amazon Bedrock 与 Elasticsearch 和 Langchain 结合使用

Amazon Bedrock 是一项完全托管的服务&#xff0c;通过单一 API 提供来自 AI21 Labs、Anthropic、Cohere、Meta、Stability AI 和 Amazon 等领先 AI 公司的高性能基础模型 (FMs) 选择&#xff0c;以及广泛的 构建生成式 AI 应用程序所需的功能&#xff0c;简化开发&#xff0c;…

使用Go语言编写自定义的HTTP代理:探险网络奇幻之旅

你是否曾经想过自己也能编写一个代理服务器&#xff0c;掌握网络冲浪的主动权&#xff1f;现在&#xff0c;有了Go语言&#xff0c;这个梦想不再遥不可及&#xff01;让我们一起踏上这段探险之旅&#xff0c;用Go语言编写一个自定义的HTTP代理&#xff0c;开启网络奇幻之旅&…

Java面试——基础篇

目录 1、java语言有哪些优点和缺点? 2、JVM 、 JDK 和 JRE的关系 3、为什么说 Java 语言“编译与解释并存”&#xff1f; 4、Java和c的区别 5、基本数据类型 5.1、java的8种基本数据类型&#xff1a; 5.2、基本类型和包装类型的区别&#xff1a; 5.3、包装类型的缓存机…