了解SVG-icon的使用流程(svg图形是什么)

编辑：rootadmin

了解SVG-icon的使用流程一.了解SVG是什么

推荐整理分享了解SVG-icon的使用流程(svg图形是什么)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:svg class,svg fill,svg icon,svg图标怎么使用,svg-icon icon-class,svg iconfont,svg icon,svg icon,内容如对您有帮助，希望把文章链接给更多的朋友！

SVG（Scalable Vector Graphics）可缩放矢量图形，是一种用于描述基于二维的矢量图形的 XML 标记语言，其基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等，还能显示文字对象和嵌入式外部图像（包括 PNG、JPEG、SVG 等）。实际项目中大多数图标都是使用的 SVG 图标文件，其主要有以下几个优点：

1.内容可读，文件是纯粹的 XML。

2.图像文件小，可伸缩性强。

3.矢量放缩，能以不牺牲图像质量为前提，进行任意缩放。

4.还能基于 DOM 模型实现动态和一些交互功能

二.使用svg-icon的配置安装依赖npm i svg-sprite-loader在 vue.config.js进行配置const path = require('path')function resolve(dir) { return path.join(__dirname, dir)} // set svg-sprite-loader config.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()三.创建src/icons文件夹创建src/icons文件，写入svg和index.js 了解SVG-icon的使用流程(svg图形是什么)

2.在index.js写入以下代码

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

3.可以通过iconfont-阿里巴巴矢量图标库去下载你要用的svg，复制地址并写入svg中

4. 在components下面新建SvgIcon组件，并对index进行配置

<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>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>四.其他配置及引入在utils/validate.js配置export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path)}

2.在main.js中引入

五.使用

1.使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg下的文件名

本文链接地址:https://www.jiuchutong.com/zhishi/289759.html 转载请保留说明！

上一篇：【uniapp】uni.request请求跨域问题解决方案(uniapp webgl)

下一篇：CUDA（10.2）＋PyTorch安装加配置详细完整教程