mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
refactor(projects): 去除vicons,统一使用iconify图标
This commit is contained in:
24
doc/iconify使用文档.md
Normal file
24
doc/iconify使用文档.md
Normal file
@ -0,0 +1,24 @@
|
||||
iconify用法
|
||||
|
||||
一、静态用法:直接用图标的组件名称
|
||||
1.安装vscode智能提示的插件: Iconify IntelliSense
|
||||
2.找图标:网址 https://icones.js.org/ 或者 vscode安装 icones插件
|
||||
3.确定图标名字:找到图标后复制名字 如:'mdi:emoticon' 组件为: <icon-mdi:emoticon />
|
||||
4.设置样式:同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小
|
||||
|
||||
二、多个图标动态渲染
|
||||
1.确定图标名字,如:'mdi:emoticon'
|
||||
2.引入Icon组件:
|
||||
import { Icon } from '@iconify/vue';
|
||||
3.动态渲染 <Icon icon="mdi:emoticon" />
|
||||
ps:Icon组件属性 https://docs.iconify.design/icon-components/vue/
|
||||
|
||||
三、结合naiveUI组件动态渲染
|
||||
1.确定图标名字,如:'mdi:emoticon'
|
||||
2.引入vue的h函数:
|
||||
import { h } from 'vue';
|
||||
3.引入Icon组件
|
||||
import { Icon } from '@iconify/vue';
|
||||
4.动态渲染
|
||||
() => h(Icon, { icon: 'mdi:emoticon', style: { color: '#f00', fontSize: '16px' } })
|
||||
ps:@/uitls已封装好了函数:iconifyRender
|
Reference in New Issue
Block a user