Vue项目使用SVG矢量图型基础步骤

什么是svg

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

优势：

SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
还能基于 DOM 模型实现动态和一些交互功能

1.svg-icon的配置

安装依赖

npm i svg-sprite-loader

在vue.config.js中配置

const path = require('path')function resolve(dir) {return path.join(__dirname, dir)
}
module.exports = {chainWebpack(config) {// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()}
}

2.在src目录下创建 icons文件夹

1.写于 svg 和 index.js 文件
2.在 index.js 写入以下代码

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component 注册的svg全局组件// register globally
Vue.component('svg-icon', SvgIcon) // 全局注册SvgIcon组件const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
// const result = requireAll(req)
// console.log('result>>>>>>>>',result); // 可以打印遍历的所有svg适量图形

3.可以通过iconfont-阿里巴巴矢量图标库去下载你要用的svg，复制地址并写入svg中
4.在components文件创建SvgIcon组件

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

4.其他配置及引入

1.在 utils 目录下配置 validate.js 文件配置

/*** @param {string} path* @returns {Boolean}*/
export function isExternal(path) {return /^(https?:|mailto:|tel:)/.test(path)
}

2.在main.js入口文件中全局引入

import './icons' // icon

4.在项目中使用

使用格式<svg-icon icon-class=“文件名”/> ,这里的文件名就是在src/icons/svg下的文件名

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

Vue项目使用SVG矢量图型基础步骤相关推荐

【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )
文章目录一.SVG 矢量图简介二.Android 中生成 Vector 矢量图资源三.参考资料一.SVG 矢量图简介 Android SVG 参考文档 : https://developer. ...
Android使用SVG矢量图打造酷炫动效！
一个真正酷炫的动效往往让人虎躯一震,话不多说,咱们先瞅瞅效果: 如果你想看 GAStudio Github主页,请戳这里: 如果你想看 GAStudio更多技术文章,请戳这里: QQ技术交流群:277 ...
Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
vue使用阿里云矢量图
vue使用阿里云矢量图在vue中虽然使用了elementui中的图标,但是会发现图标数量有限,不能够适(zhuang)用(bi)系统,因此在vue中使用阿里云矢量图. 添加矢量图到"购物车 ...
Android矢量图动画特效,Android使用SVG矢量图打造酷炫动画效果
一个真正Android使用SVG矢量图打造酷炫动效往往让人虎躯一震,话不多说,咱们先看看效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标 ...
svg矢量图字体图标iconfont的制作
前端拿到设计稿若是存在SVG矢量图需要处理成字体图标,图片放大也不会模糊 ,svg也可以在项目中直接使用,但是兼容性不太好.以iconfont字体图标库为例,在字体图标库里创建一个项目. 步骤如下: ...
android 矢量图开源,Android 使用 SVG 矢量图
android svg矢量图可能包含的操作有: SVG图还包括改变颜色,透明度,大小,矩阵操作(平移.旋转.缩放),selector, (图标,背景,按钮),动画,等 setTint(int Col ...
%config InlineBackend.figure_format=svg#矢量图设置
在默认设置的matplotlib中图片分辨率不是很高,可以通过设置矢量图的方式来提高图片显示质量 %config InlineBackend.figure_format='svg'#矢量图设置

Vue项目使用SVG矢量图型基础步骤

什么是svg

1.svg-icon的配置

2.在src目录下创建 icons文件夹

4.其他配置及引入

4.在项目中使用

Vue项目使用SVG矢量图型基础步骤相关推荐

最新文章

热门文章