vue3.0 阿里iconfont库的 svg使用、 svg

阿里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 等的管理