当前位置: 首页 > news >正文

nuxt中使用svg 开发svg组件

 

为什么要使用SVG

虽然我们在日常开发的时候,在使用iview 或者element ui等组件时,通常会包含一些常用icon;但是在面对一些特定的需求时,或者自己想high一下,这些通用的icon并不能很好的满足我们。这个时候我们可能会拿到一些SVG适量图,但是怎么去使用这些矢量图呢。

项目目录

这里以基于Nuxtjs的开发为例:

 

要使用SVG矢量图,在这里会使用到上述匡出来的文件。

其中在asserts中放置一些图片资源(个人习惯)如图所示:

 

在components中放入需要创建的Icon组件, 代码如下:

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

需要注意的是这段代码:

<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"><use :xlink:href="iconName" /></svg>

然后,我们都知道,在使用nuxt的时候,我们使用任何插件的时候都需要在plugins文件夹创建,所以,我们在这里创建icon.js文件,为了去创建一个全局的Icon组件,代码如下:

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue' // svg componentVue.component('svg-icon', SvgIcon)
const req = require.context('@/assets/icons/svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

最后一步,我们需要在nuxt的配置文件中去配置一下:

首先配置plugins:

  plugins: [ '@/plugins/icon'],

然后我们需要配置build:

 /*** Build configuration*/build: {/*** You can extend webpack config here*/extend(config, ctx) {const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))svgRule.exclude = [resolve(__dirname, 'assets/icons/svg')]// Includes /assets/icons/svg for svg-sprite-loaderconfig.module.rules.push({test: /\.svg$/,include: [resolve(__dirname, 'assets/icons/svg')],loader: 'svg-sprite-loader',options: {symbolId: 'icon-[name]',},})},},

可以看到在loader上使用了 svg-sprite-loader组件,所以我们需要安装它

yarn add svg-sprite-loader 
ornpm i svg-sprite-loader -S

现在我们可以使用已经配置好的Icon组件:

<svg-icon icon-class="3" class-name="card-panel-icon" />

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

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

Layui快速入门(2021.06.15)

第一步&#xff1a;下载layui文件 第二步&#xff1a;新建项目&#xff0c;导入下载的文件夹 第三步&#xff1a;参考文档开发 1.layui入门html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>la…...

客户端负载均衡Ribbon

文章目录Ribbon1&#xff09;、Ribbon模块2&#xff09;、RestTemplate结合Ribbon使用I、使用RestTemplateII、整合Ribbon3&#xff09;、负载均衡策略介绍4&#xff09;、自定义负载策略5&#xff09;、配置详情I、常用配置II、代码配置RibbonIII、配置文件方式配置Ribbon6&am…...

Mysql异常之Communications link failure

前天线上出现数据数据抖动&#xff0c;收到大量异常告警&#xff0c;都要疯了&#xff0c;数据库出现大量异常&#xff0c;肯定第一件事就是看下数据库监控数据&#xff0c;发现有一个从分片执行时间有一个50多秒的操作&#xff0c;这里肯定有问题了&#xff0c;第一时间找了db…...

Linux --- shell位置参数变量

一、位置参数变量 当我们执行一个shell脚本时 ,如果希望获取到命令行的参数信息&#xff0c;就可以使用到位置参数变量比如: /myshell.sh 100 200&#xff0c;这个就是一个执行shell的命令行 &#xff0c;可以在myshell脚本中获取到参数信息 基本语法&#xff1a; 1.$n (功能…...

储备未完待续

储备 如何精准熬一人份的粥 如何快速晾凉一碗粥 3M手套和钢铁侠 洗手盆三件套 三种门锁、两个门锁 制作书签的一种方法 摩托车和汽车的排气筒 变形金刚和巴巴爸爸 横向冲击和纵向冲击 我和图书馆 影响我的三本书 曲黎敏、亨利我们会追上你的、穷理查历书...

git知识点查阅

若自己在自己的电脑上修改了某一代码&#xff0c;而此时远程分支上对应的代码别人也做了修改&#xff0c;现在需要把远程分支的代码和自己本地的代码合并到本地电脑&#xff0c;操作&#xff1a; git stash git pull git stash pop...

Eclipse打开源码失败

解决&#xff1a;找不到源码&#xff0c;需要链接源码附件。...

如何成为一个成功的 Java 开发人员?

【此文章转自乐字节】 如果你是一名成功的Java程序员&#xff0c;那么在任何公司中的Java开发人员中&#xff0c;你都有机会获取一席之地。 前言 在当今时代&#xff0c;有很多编程语言可能会塑造我们的未来。然而&#xff0c;当我们开始学习编程时&#xff0c;我们总是从C语…...

代理和负载均衡的详细说明是什么

对客户端提供的代理服务&#xff0c;在客户端无法直接访问服务端的情况下&#xff0c;星池StarPool通过配置代理服务器的方式访问服务端。在整个过程中&#xff0c;客户端请求首先发送到代理服务器&#xff0c;代理服务器再将请求发送到服务端后将结果返回给客户端。从服务端角…...

2021年安全员-C证复审考试及安全员-C证模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全生产模拟考试一点通&#xff1a;安全员-C证复审考试参考答案及安全员-C证考试试题解析是安全生产模拟考试一点通题库老师及安全员-C证操作证已考过的学员汇总&#xff0c;相对有效帮助安全员-C证模拟考试题学员顺…...

pytest的mark标记用例功能

用例标记&#xff0c;便于我们更好归类测试用例 pytest.mark.skip跳过此用例:使用跳过装饰器标记它&#xff0c;可以传递一个可选的原因pytest.mark.xxx标记用例为xxx # 执行的时候执行webtest的用例。pytest -v -m xxx # 执行的时候不执行webtest的用例。pytest -v -m not xx…...

使用DNSObserver检测DNS安全漏洞

关于DNSObserver DNSObserver是个功能强大的DNS服务&#xff0c;该工具使用Go语言开发&#xff0c;可以帮助广大研究人员轻松检测各种类型的盲注漏洞。它可以监控渗透测试人员所搭建服务器的带外DNS交互信息&#xff0c;并通过Slack发送查询通知。DNSObserver可以帮助我们寻找的…...

Zookeeper源码查看: 七. 客户端启动源码

客户端启动源码 查看启动脚本 查看 zkCli.sh, 在 zkCli.sh 启动 Zookeeper 时, 会调用 ZooKeeperMain.java 创建 ZookeeperAdmin 查看启动类 ZookeeperMain 查看 ZookeeperMain 构造方法 查看 connectToZK() 方法 初始化监听器 查看 ZookeeperAdmin 类 解析连接地址…...

数组--Leetcode 27. 移除元素

1、题目 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出…...

计组第五章:中央处理器

文章目录CPU的功能和基本结构1.运算器的基本结构①专用数据通路方式②CPU内部单总线方式2.控制器的基本结构小结CPU的功能和基本结构 1.运算器的基本结构 ①专用数据通路方式 AX、BX……这些就和图里的R0、R1……对应 三态门每一路都接上&#xff08;一端接输出一端接输入&am…...

整理了 34 个 Python 自动化办公库

本次内容涵盖了Excel、Word、PPT、ODF、PDF、邮件、微信、文件处理等所有能在办公场景实现自动化的库,希望能够对大家有所帮助。 Python Excel自动化库 // 1.xlwings 库 官网: https://www.xlwings.org/ 特点:xlwings 是开源且免费的,预装了 Anaconda 和 WinPython,可…...

【Jenkins插件】之Multiple SCMs

在Jenkins配置中&#xff0c;有的时候我们需要依次拉取多个代码仓库&#xff0c;有时候还会需要既拉取svn代码库&#xff0c;又拉取git代码库&#xff0c;但Jenkins默认的配置是不支持这样操作的。因此&#xff0c;我们需要使用到Jenkins的Multiple SCMs插件。 Multiple SCMs这…...

为什么自己干了这么多活,最后功劳都是别人的?

【本文只针对IT行业技术岗】 一、粉丝留言 自己每天加班到10点&#xff0c;有时候都到凌晨&#xff0c;周6基本全勤&#xff0c;公司项目忙的时候周日还去加班&#xff0c; 做过的项目无数&#xff0c;很多项目都给公司带来了丰厚的利润。 年底年终奖比别人少了一个月&…...

pytest(10)-参数化详解

先看如下情况&#xff0c;即为了测试一个函数&#xff0c;列举了三个测试用例&#xff0c;每个用例其实就是参数不同而已 在test_example.py 文件中编写如下代码&#xff1a; def add(a,b):return (ab)def test_1():assert add(3,5)8def test_2():assert add(2,4)7def test_3(…...

防(反)浏览器指纹技术之指纹浏览器揭秘

什么是指纹浏览器? 首先&#xff0c;这个指纹并不是上班打卡的指纹&#xff0c;也不是你家指纹锁的指纹&#xff01; 这里指的浏览器指纹是指通过浏览器的各种信息&#xff0c;如系统字体、屏幕分辨率、浏览器语言、时区等等&#xff0c;无需 cookie 等技术&#xff0c;就能…...

A - Til the Cows Come Home POJ - 2387

A - Til the Cows Come Home POJ - 2387 最短路 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #include<queue> using namespace std; const int maxn 2010; typedef pair<int, int> PII; // first 存距离…...

C#不同状态的按钮 消失or显示

效果展示&#xff1a; 点击前 点击后 //而且 ”备注“ 变成可编辑状态 点击确定后 编辑成功 并变为初始 只有一个的” 编辑 “按钮 并在listView更改成功 列表样式 解决方案&#xff1a; 首先创建三个Button 都放在一个位置上 当然需要有一个按钮重合在编辑上面&#xff08;为…...

vue--CompositionAPI 中如何使用 VueX

a.同步方法改变数据&#xff1a; Home.vue <template><div class"home"><img alt"Vue logo" src"../assets/logo.png"><h1>{{name}}</h1></div> </template><script> import {toRefs} from v…...

5. 断路器hystrix dashboard turbine

hystrix使用 feign中使用 hystrix feign:hystrix:enabled: true #必须配置Component public class EurekaClientHystrix implements EurekaClientFeign{}使用feign配置了&#xff0c;这些&#xff0c;即可进行回退 Feign 的起步依赖中已经包含Hystrix依赖&#xff0c;所以只…...

springBoot 一键启动多个服务

我们启动springboot服务时经常一个一个去启动,这样操作显然是非常麻烦的,那么怎样让他一键启动多个服务呢? 第一步:打开设置 第二步:选择Compound 第三步:选择你要启动的服务 第四步:点击就可以一键启动了...

JavaScript 字面值对象的一些基本方法

展开运算符的使用 //构造字面量对象时使用展开语法 let person {name:tom,age:18} let person2 {...person} //展开运算符展开对象属性时&#xff0c;只能在对象中进行展开 //console.log(...person); //报错&#xff0c;展开运算符不能直接展开对象 console.log(我是perso…...

深入理解cloud 题外话1:httpPool连接池工具类配置,logback.xml,feign日志配置

httpPool Configuration public class HttpPool {Beanpublic HttpClient httpClient(){System.out.println("init feign httpclient configuration " );// 生成默认请求配置RequestConfig.Builder requestConfigBuilder RequestConfig.custom();// 超时时间request…...

Eclipse打开源码失败

解决&#xff1a;找不到源码&#xff0c;需要链接源码附件。...

黄色固体或黄色油状物PC Biotin-Azide;photoclevable Biotin-N3是可分解的生物素

名 称&#xff1a;PC Biotin-Azide&#xff1b;photoclevable Biotin-N3 外 观&#xff1a;黄色固体或黄色油状物 分子式&#xff1a;C35H55N9O12S 分子量&#xff1a;825.37 纯度&#xff1a;>95% 溶解度&#xff1a;Water, DMSO, DMF 保存条件&#xff1a;-20℃ 12个…...

SqlServer反向生成PowerDesigner物理数据模型

要以管理员的身份运行&#xff01;&#xff01;&#xff01;&#xff01; 我的已经汉化了一部分。选择反向工程里的“Database” 名字随意 点击确定&#xff0c;–>使用数据源&#xff0c;可以不选管理员 点击使用数据源&#xff0c;右边那个&#xff0c;小白色垃圾桶 选…...

dbc2000 注册机|dbc2000 注册码注册机下载

点击下载来源&#xff1a;dbc2000 注册机 dbc2000 注册机是同名源程序软件的注册机软件&#xff0c;该源程序软件是一款应用于数据库搭建以及数据写入的数据库架设工具&#xff0c;它拥有强大的数据写入功能&#xff0c;在作为应用程序使用时&#xff0c;它不仅可以充当数据属性…...

秋招面经第八弹:网易二面-数据开发工程师

秋招第八弹&#xff1a;网易二面-数据开发工程师 写在最前&#xff1a;秋招以来一直在冲&#xff0c;因为事情比较多&#xff0c;对于笔试面试一直没有复盘&#xff0c;现在靠仅存的记忆把面试的一些问题记录下来&#xff0c;尽可能记录出能回忆到的问题&#xff0c;但可能记的…...

安卓课程格子APP

https://download.csdn.net/download/weixin_57836618/73810452 功能演示&#xff1a; 查看所有课程 点击主页面空白处即可添加课程 添加课程之后查看课程 查看双周课程 查看单周课程 6.查看课程详情...

强化学习——格子世界

强化学习——格子世界 项目源码地址&#xff1a;https://gitee.com/infiniteStars/machine-learning-experiment 1. 实验内容 2. 实验代码 import numpy as np import matplotlib.pyplot as plt from matplotlib.table import Table from xml.dom.minidom import Document #手…...

华为机试 - 跳格子游戏

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 地上共有N个格子&#xff0c;你需要跳完地上所有的格子&#xff0c;但是格子间是有强依赖关系的&#xff0c;跳完前一个格子后&#xff0c;后续的格子才会被开启&#xff0c;格子间的依赖关系由多组st…...

php 爬课程表信息,Ruby爬取教务系统生成课程表

我为什么要虐自己最近觉得课程格子广告越来越多&#xff0c;乱七八糟的东西越来越多&#xff0c;完全失去了一开始的存在价值&#xff0c;并且没有电脑端app&#xff0c;想查看课程必须拿出手机&#xff0c;而我使用电脑频率要比手机高&#xff0c;所以才有了折腾的动力。于是我…...

android 课程表 ui,UICollectionViewLayout实现课程表布局

因为项目中有课程表的相关模块&#xff0c;第一时间想到用UICollectionView。然而后期的需求越来越复杂&#xff0c;每个格子需要展示的内容越来越多&#xff0c;所以不得不寻找合适的解决方案。最后发现自定义UICollectionViewLayout可以实现我的需求。先放效果图&#xff1a;…...

Android自定义View课程表,Android 自定义View课程表表格

自己闲下来时间写的一个课表控件使用的自定义LinearLayout 里面View都是用代码实现的 最终效果如下图 写的可能有问题希望多多指点创建一个自定义LinearLayout 控件用来装载课程的信息和课程的周数 和节数大概的布局三这样的根据上面的看来觉得总体布局我分了两个 上面的星期是…...

java课程设计设计_java课程设计

1. 团队课程设计博客链接https://www.cnblogs.com/choco1ate/p/12172223.html2.本组课题及本人任务本组课题&#xff1a;泡泡堂(炸弹人)游戏本人任务&#xff1a;Box类(游戏地图中的每个方格)Bomb类(游戏过程中的)游戏玩家输赢信息的文件储存3.需求分析Box类&#xff1a;该类为…...

《课程格子》的一个笔试题目

题目如下&#xff0c;感觉很适合喜欢琢磨的程序员&#xff0c;也是考验你编码风格的时候。 Lets make a tower defense game&#xff08;塔防游戏):1. You have 1 tower, with H health and D dps(damage per second).2. There are n attackers, each with h_i health and d_i …...

Android仿照超级课程表 or 课程格子 一键提取课表功能(方正系统)

参考文章http://blog.csdn.net/sbsujjbcy ,本文仿照‘ 安卓弟 提供的android 项目实战——打造超级课程表一键提取课表功能文章&#xff0c;对他的代码进行了修改和补充&#xff0c;为什么要修改呢&#xff1f;原因是安卓弟的那个源码版本过于老旧&#xff0c;很多方法已经过…...

Windows 7 下Fetion2008无法正常运行

Windows 7 首次安装Fetion 2008 之后可以正常运行&#xff0c;奇怪的是重新之后就无法运行了。总是提示下面这么一个提示&#xff1a; 无法定位程序输入点 DwmHintDxUpdate 于动态链接库 USER32.dll 。 找了好久发现是因为Fetion目录下的动态库dwmapi.dll不是最新的。 解决办法…...

61php飞信发送类(phpfetion)v1.5,资源索引 L_PC6下载

软件名称更新时间软件等级人气大小2012-11-20135463.3M2009-06-0321271KB2013-04-10671104KB2012-11-17183448.8M2011-02-2512582KB2014-12-2421384KB2009-02-15307153.2M2010-07-10119105M2015-07-04171.9M2005-10-2725473KB2014-08-14252.5M2014-07-06466227.9M2012-12-12206…...

评论一下现有几个开源IM框架(Msn/QQ/Fetion/Gtalk...)

----------------前言---------------- 这阵子&#xff0c;在集成通讯框架&#xff0c; 由于不想自己造轮子&#xff0c;因此参考了现在一些开源的IM框架&#xff0c;结果是。。。。。让我有点不爽&#xff0c;导致开发的时间不多&#xff0c;但是debug的时间浪费的太多了&…...

fetion发送短信介绍(比如天气预报)

背景 最近自从论坛上出现了利用139手机邮箱建立股票短信查询系统&#xff0c;陆续有几个人咨询我相关fetion api使用&#xff0c;所以这里做一下记录&#xff0c;分享一下给大家。 使用介绍 我使用fetion&#xff0c;没啥特别的技术含量&#xff0c;直接利用了三方的api包&…...

ubuntu 下安装fetion

第一步&#xff1a;添加PPA源&#xff1a; 对应的版本&#xff1a; sudo gedit /etc/apt/sources.list 10.10&#xff1a; 代码: deb http://ppa.launchpad.net/happyaron/ppa/ubuntu maverick main 10.04&#xff1a; 代码: deb http://ppa.launchpad.net/happyaron/ppa/ubun…...

两个fetion飞信API

1.http://api.fx-zone.cn/ 2.http://sms.api.bz/ https://sms.api.bz/...

研究QQ、Fetion、Msn的socket连接

LumaQQ 发送信息流程&#xff1a;MessageManager.SendIMPackageManager.Sendpacket: port QQPort.Main.NameConnectionManager.EnsureConnection 确认ConnectionPool 建立socket链接ConnectionPool. Send IConnection.Send()TCPConnection.Send SocketConnection.Send sock…...

飞信java版2013_飞信(Fetion) 2013青春版

飞信是中国移动推出的一款即时通讯服务软件&#xff0c;下载安装飞信&#xff0c;可以通过飞信可以实现互联网和移动网络之间的无缝连接通信服务。飞信融合了语音、GPRS、短信等多种通信手段&#xff0c;以满足用户的实时语音、准实时的文字和数据、非实时通讯需求&#xff0c;…...

php飞信接口,中国移动飞信发送接口(Fetion API)

本飞信接口是基于HTTP协议的接口&#xff0c;可以在任何支持HTTP协议的程序中使用。开发此接口的主要目的是方便一些不能用PHP的朋友们使用飞信接口&#xff0c;另外可以避免飞信不断升级导致的源程序不可用。本接口同时支持HTTPS&#xff0c;可避免在网络传输中泄漏数据。 (1)…...