将svg文件放在该文件夹下面
在components文件夹中创建svgiconfont.vue文件
文件内容:
[removed]
import '@/态或icons'
export default {
name: 'svg-icon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
console.log('svg-icon ' + this.className)
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
},
mounted: function() {
}
}
[removed]
style
.svg-icon {
width: 1em
height: 1em
vertical-align: -0.15em
fill: currentColor
overflow: hidden
}
创建index.js文件
文件内容如下:
import Vue from 'vue'
import svgiconfont from '@/components/svgiconfont'// svg组件
/*
require.context有三个参数:
directory:说明需要检索的目录
useSubdirectories:是否检索子目录
regExp: 匹配文件的正则表达式
*/
// 全局注册
Vue.component('svg-icon', svgiconfont)
const requireAll = requireContext =>requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
在main.js引入icons文件夹下
即添加import ‘@/icons’
修改webpack.base.conf.js
添加代码:
{
test: /\.svg$/,
loader: "svg-sprite-loader",
include: [resolve("src/icons")],
options: {
symbolId: "icon-[name]"
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/谨高,
loader: 'url-loader',
exclude: [resolve("src/帆晌伍icons")],
options: {
limit: 50000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
使用方法
在页面中添加
什么是SVG格式?简单地说,SVG格式图片是一种可缩放矢量图形。
在计算机中存储时,这种格式的文件不占用磁盘空间。用鼠标直接拖拽就可以改变其外观,或者通过简单的修改使其适合特定场合使用。 典型的svg文件由一系列透明的png位图组成(一个或多个png图层),这些图片的像素值为0或1,并且每个图层都拥森困有各自的属性信息、透明度、背景色等等。 svg文件的本质是一个位图图像序列,而该图像序列可以包含文本内容或其他类型的对象数据(例如颜色和形状)。
SVG格式优势1、色彩丰富,可编辑性强。
2、文件小而轻,并且图像质量好。
4、易于传输和共享。
8、能够提供多种显示模式,有广泛的应用领域。
SVG在线转换svg格式是一种图形文袭滑件,需要借助一些软件才能将svg转换成其他格式,阿强在这里推拍春腊荐一款转换功能强大并且免费的在线转换器——AI改图神器的在线SVG格式转换器。
*** 作步骤也非常简单,只需要上传SVG格式的图片到【在线SVG转换器】中,选择你想要转换的格式,比如jpg、png等,最后点击开始转换就完成了,关键还是免费的!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)