1、安装依赖

npm install --save-dev svg-sprite-loader

2、 新建svg资源文件夹     src/assets/svg

将svg资源放入此目录,接下来会在配置文件中该路径

3、vue-cli 脚手架项目3.x 以上配置  vue.config.js

 1 const path = require('path')
2 module.exports = {
3 chainWebpack: config => {
4 // svg rule loader
5 const svgRule = config.module.rule('svg') // 找到svg-loader
6 svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
7 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
8 svgRule // 添加svg新的loader处理
9 .test(/\.svg$/)
10 .use('svg-sprite-loader')
11 .loader('svg-sprite-loader')
12 .options({
13 symbolId: 'icon-[name]',
14 })
15 // 修改images loader 添加svg处理
16 const imagesRule = config.module.rule('images')
17 imagesRule.exclude.add(path.resolve(__dirname, 'src/assets/svg')) //注意这个路径,为svg资源文件的路径
18 config.module
19 .rule('images')
20 .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
21 }
22 }

4、创建组件  SvgIcon.vue  ( src/compoments/SvgIcon.vue )

 1 <template>
2 <svg :class="svgClass" aria-hidden="true">
3 <use :xlink:href="iconName"></use>
4 </svg>
5 </template>
6
7 <script>
8 export default {
9 name: 'svg-icon',
10 props: {
11 iconClass: {
12 type: String,
13 required: true
14 },
15 className: {
16 type: String
17 }
18 },
19 computed: {
20 iconName () {
21 return `#icon-${this.iconClass}`
22 },
23 svgClass () {
24 if (this.className) {
25 return 'svg-icon ' + this.className
26 } else {
27 return 'svg-icon'
28 }
29 }
30 }
31 }
32 </script>
33
34 <style scoped>
39 </style>

5、组件注册(全局)  (src/utils/iconsSvg.js)

 1 import Vue from 'vue'
2 import SvgIcon from '@/components/SvgIcon' //引入第四步的组件
3
4 // 全局注册组件
5 Vue.component('svg-icon', SvgIcon)
6 // 定义一个加载目录的函数
7 const requireAll = requireContext => requireContext.keys().map(requireContext)
8 const req = require.context('@/assets/svg', false, /\.svg$/) //为svg资源文件的路径
 9 // 加载目录下的所有 svg 文件 10 requireAll(req)

6、引入组件  main.js

import './utils/iconsSvg'

7、使用svg组件
iconClass: svg文件的文件名
className: svg图标的样式类名

 1 <template>
2 <div>
3 <p>小明同学的大头贴</p>
4 <svg-icon iconClass="boy" className="boy"></svg-icon>
5 </div>
6 </template>
7
8 <style scoped>
9 .boy {
10 width: 200px;
11 height: 200px;
12 }
13 </style>

vue中使用svg并设置大小的更多相关文章

  1. 在vue中使用svg sprite

    概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...

  2. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  3. 如何在vue中使用svg

    1.安装依赖 npm install svg-sprite-loader --save-dev 2.在config文件中配置    const path = require('path'); func ...

  4. vue中使用svg字体图标

    1.在src/ 下面新建目录icons,里面新建文件夹svg,和文件index.js .svg用于存放从iconfont下载下来的svg格式的图标,index.js用于引入使用到svg文件和对应的组件 ...

  5. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

  6. vue中引入.svg图标,使用iconfont图标库

    阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...

  7. vue中,svg图标添加click事件,部分浏览器不生效

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

  8. vue中 使用SVG实现鼠标点击绘图 提示鼠标移动位置 显示绘制坐标位置

    <div class="div1"> <svg id="svg1" xmlns="http://www.w3.org/2000/sv ...

  9. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  10. vue中动态设置echarts画布大小

    document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...

随机推荐

  1. 新的世界,我们推荐不劳而获 -> 持续更新中

    随着技术带来的生产力爆发越来越猛烈,有人提出是不是有必要保留一些落后的生产工艺及相关岗位,以避免社会动荡. 我的答案:不用.但是要改变社会对于不劳而获的态度:我们对于生活资料的不劳而获持接受的态度,但 ...

  2. 怎样清空 DNS 缓存?

    在 Windows 下命令行执行:ipconfig /flushdns 在 macOS 下执行命令:sudo killall -HUP mDNSResponder

  3. 第二节 printf语句和C++中的判断结构

    第二节 printf语句和C++中的判断结构 1.1printf语句作用 保留几位小数:%.4lf 保留四位小数 %.3lf 保留三位小数, 格式化输出:整数:printf("%5d!&qu ...

  4. C# Set集合

    包含不重复元素的集合称为"集(set)"..NET Framework包含两个集HashSet<T>和SortedSet<T>,它们都实现ISet<T ...

  5. 记录小程序字符串模板渲染WxParse

    1.先去https://github.com/icindy/wxParse上downLoad代码,然后直接复制到项目里,跟pages目录同级 2.在要用的js页面声明 var WxParse = re ...

  6. linux 查看进程的启动开始时间

    先使用命令查看需要查看的进程 ps -ef | grep java root 29861 13755 2 09:42 pts/0 00:10:48 java -jar XXXX.jar ps axo ...

  7. 使用ELRepo升级CentOS内核

    在腾讯云中部署了一些服务器,操作系统使用的是CentOS 7.6,但是其默认内核版本较低,现使用ELRepo对CentOS的内核进行升级. 操作环境 服务器:腾讯云轻量应用服务器 操作系统:CentO ...

  8. 虚拟办公、虚拟展会、虚拟偶像,RTE+XR 还能做什么?

    2021年6月10日,HTC VIVE 在北京举办以"融合·至界"为主题的新品体验会暨开发者客户大会.近 300 位 XR 行业精英齐聚一堂,共同见证了 HTC VIVE 全能 V ...

  9. 《操作系统导论》读书笔记1——CPU虚拟化,进程

    系列文章目录和关于我 一丶CPU的虚拟化 一个桃子,我们称之为物理(physical)桃子.但有很多想吃这个桃子的 人,我们希望向每个想吃的人提供一个属于他的桃子,这样才能皆大欢喜.我们把给每个 人的 ...

  10. Debiased Contrastive Learning of Unsupervised Sentence Representations 论文精读

    1. 介绍(Introduction) 问题: 由PLM编码得到的句子表示在方向上分布不均匀, 在向量空间中占据一个狭窄的锥形区域, 这在很大程度上限制了它们的表达能力. 已有的解决办法: 对比学习. ...