阿里iconfont库的 svg使用、 svg"/>
vue3.0 阿里iconfont库的 svg使用、 svg
记录svg使用学习:svg 全局使用,并后期添加的 svg 可直接根据规则使用。
什么是svg ?使用
SVG是一种用XML定义的语言,用来描述二维矢量及矢量/栅格图形。用XML格式定义的矢量图。
关于阿里iconfont库的 svg
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
- 兼容性较差,支持ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
svg全局组件案例
步骤一:下载依赖 svg-sprite-loader 插件
npm install svg-sprite-loader -D
步骤二:在 iconfont(阿里图标库)中下载 svg 图标,并导入
步骤三:vue.config.js 中配置
在 symbolId 配置 图标名称如: icon-home
chainWebpack: config => {//svg 配置config.module.rules.delete("svg"); //重点:删除默认配置中处理 svgconfig.module.rule('svg-sprite-loader').test(/\.svg$/).include .add(path.resolve('./src/assets/svg')) //处理 svg 保存路径.end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]' //给 symbo 配置 id})},
步骤四:创建 Svgicon 组件
<!-- svg-sprite-loader svg雪碧图 转换工具 -->
<!-- <symbol> 元素中的 path 就是绘制图标的路径,这种一大串的东西我们肯定没办法手动的去处理,
那么就需要用到插件 svg-sprite-loader 帮助我们处理图标。此插件就是将 .svg 文件自动生成 <symbol>元素并插入进 <svg> 标签内,通过插件的处理就可以很方便解决生成<symbol> 图形模板对象的问题。-->
<template><svg class="svg-class" :class="className"><use :href="'#icon-' + iconName"></use></svg>
</template>
<script>
export default {name: 'SvgIcon',props:{//图标名称 如 homeiconName: {type: String,default: ""},//对不同区域的 icon 样式调整,如字体大小className: {type: String,default: ""}},setup(){//获取当前 svg 目录所有为 .svg 结尾的文件const req = require.context('@/assets/svg',true,/\.svg$/)//解析获取的 .svg 文件的文件名称,并返回const requireAll = (requireContext) => {return requireContext.keys().map(requireContext);}requireAll(req)}
}
</script>
步骤五:组件全局挂载
在vue3.0中使用链式挂载。
若想在局部使用则在使用组件的页面引入就行,无法上面操作:
import SvgIcon from '@/components/Svgicon'components:{ Menu,SvgIcon },
步骤六:组件使用
// iconName 中传入svg名称; className 为特殊样式
<svg-icon iconName="home" className="aside-svg" ></svg-icon>
步骤七:关于样式 icon.scss
在 icon.scss 中用于 icon 样式的管理,包括 png 等的管理
更多推荐
vue3.0 阿里iconfont库的 svg使用、 svg
发布评论