Vue.js使用矢量图

安装依赖

npm i svg-sprite-loader --save

目录结构

在这里插入图片描述

创建 svg-icon 组件

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName"/></svg>
</template><script>
export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}}}
}
</script><style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

在该组件的同级目录创建 index.js 和 svg文件夹,该文件夹下存放着svg文件


const requireAll = requireContext =>requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

修改 Vue cli3 配置

在vue.config.js 中

module.exports = {// svg 配置chainWebpack: config => {const svgRule = config.module.rule('svg')// 清除已有的所有 loader,如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。svgRule.uses.clear()// 添加要替换的 loadersvgRule.use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'})},devServer: {proxy: {'/api': {target: 'http://localhost:8002', //对应自己的接口changeOrigin: true,ws: true,pathRewrite: {'^/api': ''}}}},publicPath: process.env.NODE_ENV === 'production' ? './' : './',outputDir: "dist", // 输出文件目录lintOnSave: false, // eslint 是否在保存时检查assetsDir: 'static', // 配置js、css静态资源二级目录的位置  }

使用

在main.js 入口文件中引入使用

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'// svg组件
import '@/components/SvgIcon/index.js'
Vue.component('svg-icon', SvgIcon)

在组件中使用

// icon-class 就是svg文件的名称
<svg-icon :icon-class="value.icon"  />

例子

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

aix oracle监听配置_Oracel:ORA-12518:监听程序无法分发客户机连接

一、【问题描述】最近&#xff0c;在系统高峰期的时候&#xff0c;会提示如上的错误&#xff0c;致使无法连接到服务器上的数据库。二、【分析过程】1、首先判断是否由于监听配置不正确的原因导致?系统在正常情况下都可以正常的使用&#xff0c;检查监听配置&#xff0c;完全正…

PowerShell巡检主机获取CPU占用、内存使用、硬盘情况的脚本

Windows底下用PowerShell写的获取CPU核数、占用率&#xff1b;内存可用内存大小&#xff08;GB&#xff09;、使用率&#xff1b;硬盘总空余大小&#xff08;GB&#xff09;&#xff0c;使用率 # 获取硬盘空余空间 function get_disk_free(){ $disk Get-WmiObject -Class win…

【java】【乱码】Java 读取本地 UTF8 txt文件乱码处理

package test;import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.InputStreamReader;/*** author JavaAlpha 2012-7-12下午02:06:27 UTF8 txt文件乱码处理*/ public class QQGroup {/*** param args*/public static void …

Windows巡检IIS指标脚本(PowerShell实现)

function WriteLog([string] $content){#Write-Host $content$script:OutMessage $content "rn" }Import-Module WebAdministration#获取所有Application Pools #WriteLog "Start checking IIS application pool..." # 开始检查IIS应用程序池Get-Ch…

4 命名规则_赛普拉斯(Cypress)存储器芯片命名规则

1&#xff0c;前言 赛普拉斯(Cypress)公司是一家知名的电子芯片制造商。赛普拉斯在纽约股票交易所上市&#xff0c;在数据通信、消费类电子等广泛领域均提供芯片解决方案。 2020年4月16日赛普拉斯(Cypress)和英飞凌(infineon)同时对外发文宣布&#xff1a;infineon英飞凌已经完…

数据数据库学通MongoDB——第一天 基础入门

在本文中,我们主要介绍数据数据库的内容,自我感觉有个不错的建议和大家分享下 关于mongodb的利益&#xff0c;长处之类的这里就不说了&#xff0c;一唯要讲的一点就是mongodb中有三元素&#xff1a;数据库&#xff0c;合集&#xff0c;文档&#xff0c;其中“合集” 就是对应关…

win10雷电3接口驱动_技嘉推出B550 主板首发雷电3接口:40Gbps速率、Intel主控

下周AMD针对主流市场的B550芯片组就要上市了&#xff0c;千元级主板上也有PCIe 4.0了。技嘉今天又宣布了一款新型号主板——B550 Vison D&#xff0c;它竟然支持Intel独家的Thunderbolt 3&#xff08;俗称雷电3&#xff09;接口&#xff0c;这还是B550中首款&#xff0c;40Gbps…

使用mysqldump 导出sql数据

mysqldump -uusername -ppassword --databases 数据库名 --tables 表名 --where "add_time > 2021-07-15 00:00:00" > ~/temp/IpcOrderConsumption/t_order_7_15.sql # --where 是要导出数据的条件

eclipse--eclipse(JavaEE版本)部署Tomcat工程(转)

介绍如何在eclipse&#xff08;JavaEE版本&#xff09;中部署Tomcat工程&#xff0c; 转自“http://www.cnblogs.com/chenjunbiao/archive/2011/12/09/2281702.html” “http://www.iteye.com/topic/825394” Eclipse下Tomcat常用设置 1&#xff0c;Eclipse建立Tomcat服务 1.1 …

python工程师需要考什么证_考垃圾处理清运工程师证哪里颁发的今年的考试时间即将告知...

考垃圾处理清运工程师证哪里颁发的今年的考试时间即将告知二、中级会计师(会计师)资格考试。三、高级会计师资格考试。四、中级会计师资格考试。五、注册税务师职称。六、注册公司登记。七、注册会计师、法人和其他组织的税务师资格考试。八、注册税务师职称。而在报名的时候不…

mysql集群搭建(使用docker 一主一从)

mysql集群搭建 my.cnf 配置文件配置 在 /etc/mysql/my.cnf 中 &#xff08;拿一个举例&#xff09; &#xff08;docker中需要先进入开启的容器&#xff0c;docker exec -it 容器名称 /bin/bash&#xff09; [mysqld] #启用二进制日志 log-binmysql-bin #服务器唯一ID&…

Linux安装后初始优化步骤(仅适用于CentOS、RedHat)

第1步&#xff0c;首先要初始化网卡&#xff0c;因为网络对于Linux操作系统来说就是生命&#xff0c;没了网络就无法进行任何的组件安装和环境搭建 # 编辑ifcfg-enp0s3网卡配置文件 vi /etc/sysconfig/network-scripts/ifcfg-enp0s3 # ONBOOT参数将“no”改为“yes” ONBOOT Y…

华为主题包hwt下载_华为主题 | 黑白人物

黑白人物1前言每周更新一次&#xff0c;没办法量产很抱歉但每一个主题都很精致这次的主题新增了QQ美化&#xff0c;锤子便签还有白肚皮美化不会太花里胡哨&#xff0c;放心不要喷我&#xff0c;所用壁纸皆是在堆糖里寻找喜欢的宝宝们&#xff0c;可以帮忙点一下再看或者关注不迷…

filebeat + logstash 发送日志至kafka 入门

filebeat 官方文档 配置文件 filebeat.yml filebeat.inputs:# Each - is an input. Most options can be set at the input level, so # you can use different inputs for various configurations. # Below are the input specific configurations.- type: log# Change to …

Ubuntu(Debian) 18.04 安装后开启ssh和防火墙传输文件

1. 备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.修改 sudo vim /etc/apt/sources.list deb http://us.archive.ubuntu.com/ubuntu/ bionic main restricted deb http://us.archive.ubuntu.com/ubuntu/ bionic-updates main restricted deb http://us…

[转]localCache与集中式cache

http://www.cnblogs.com/redcreen/archive/2011/02/15/1955248.html 使用memcache缓存数据,减少对数据库的直接访问,提高网站性能已经成了各大网站最基本的技术.如何更好的提高memcache缓存的利用率及命中次数会在后面的blog中单独介绍,本文主要探讨为何及如何使用本地缓存(jav…

上机环境是什么意思_380元入手RX580满血显卡,跑分17万,还要什么自行车

今年显卡的行情都要比去年上涨一些&#xff0c;特别是刚过完年那一段时间&#xff0c;价格上涨的尤其的快&#xff0c;一张显卡上涨几十块&#xff0c;当时也是不敢入手 &#xff0c;等到了现在行情总算要好一些了&#xff0c;价格也适当的在往下走&#xff0c;最后入手了一款性…

docker-conpose 入门

docker-compose 安装 官方地址github Linux 下安装 sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose要安装其他版本的 Compose&#xff0c;请替换 1.29.1 …

史上最全 yum 入门使用教程和常见错误解决办法

介绍 众所周知&#xff0c;Redhat和Fedora的软件安装命令是rpm。需要手动寻找安装该软件所需要的一系列依赖关系&#xff0c;yum的诞生很好解决了以上的问题&#xff0c;下面有几个实用的yum小技巧和大家分享。 rpm与yum常用命令集合 $ rpm -qa | grep jenkins …

【首创】完美解决scrollview与menu的兼容问题

经过一段时间的学习&#xff0c;才发现CH5里scrollview的例子很少&#xff0c;也没有相关的SAMPLE&#xff0c;于是乎&#xff0c;开始投入研究。大多数scrollview的例子只有在cocos2d-x里才用到&#xff0c;那么CH5里要用到滚动条怎么理呢&#xff1f;有人说用tableview&#…