700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue3封装iconfont字体图标组件

vue3封装iconfont字体图标组件

时间:2023-07-04 14:01:36

相关推荐

vue3封装iconfont字体图标组件

1.在 iconfont图标库首页搜索栏搜索你需要的图标 或者在下方库中找到自己喜欢的图标

2.点击加入购物车

3.然后右上角购物车图标,添加至项目

4.如果已经有项目,要求使用项目提供好的图标直接在首页资源管理中点击我的项目直接使用,无需加入购物车

5.选择你需要的图标样式,点击下载到本地

6.将解压后的文件全部拉入项目目录文件iconfont下,如果项目图标库的图标更新,则需要重新下载解压并更换iconfont中的文件

7.封装iconfont组件

IconFont:

<template><i:class="`iconfont ${icon || ''} ${iconClass || ''}`":style="iconStyle"></i></template><script>import "./../iconfonts/iconfont.css";export default {name: "IconFont",props: ["icon", "iconStyle", "iconClass"],};</script>

IconFontSymbol:

<template><svg class="iconfont-svg" :style="iconStyle" aria-hidden="true"><use :xlink:href="`#${icon || ''}`" /></svg></template><script>import "./../iconfonts/iconfont.js";export default {name: "IconFontSymbol",props: ["iconStyle", "icon"],};</script>

8.在页面引入注册

9.html使用封装的组件图标名前不需要#,不封装的需要带#

写法一:

<icon-font-symbol icon="icon-original_order" />

写法二:

<IconFontSymbol icon="icon-original_order" />

10.icon-font可以在样式中自定义颜色和大小

icon-font-symbol 只可以自定义大小,颜色不可以。

11.如果不封装的话引入后页面部分使用:

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-expired_contract"></use></svg>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。