在前面自定义tree组件继续功能迭代前,我们先开发一个通用的ScgIcon
组件,用于后续组件模板中小图标的展示。
引入iconfont
官网:https://www.iconfont.cn/
选取图标进行下载,只取iconfont.js
文件
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/749f8bba7d4a4e139eecdde15708fccc.png)
在prettier
中忽略该文件:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/42520f5c650747e7bd2a0ad9ac0f27bc.png)
放入iconfont.js
文件:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/59a592062c9541c2a0a0fb1619c7dc73.png)
开发SvgIcon组件
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/25057a645e6a4869acd0d6bf400051c4.png)
vitepress整合
增加菜单
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1d80a6169d994fc6a176a1f9245420da.png)
全局引入和注册
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/336cfb4c723947a4bb503573e8e44b16.png)
编写markdown
文档:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/4a7f1460e77d4f53b824f3e62358fe8a.png)
编写组件示例:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/e080ad8623354960aade2b538a578571.png)
执行效果:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/a149b74bd722485aac69a6aec464ff08.png)
应用到Tree组件
在tree
组件模板中应用<SvgIcon>
组件。
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/32614d772e2840dda930e55306bf5af3.png)
将原先的+
、-
符号的按钮替换为自定义折叠展开图标:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/cc14e119361f446d9b364e4495aa3e7a.gif)