图标
LiteTree
支持在节点标题、标签、标识、注释中显示图标。
内置图标
LiteTree
内置仅支持以下图标
- 内置图标
- file
- folder
- folder-open
- tag
- star
- yes
- no
- checked
- unchecked
- arrow
TIP
如果节点标题内容以/
结尾,则显示为folder
图标。
使用图标
在节点标题、标签、标识、注释中使用[图标名]
即可指定图标。
ts
<LiteTree>
根节点
节点1
节点1.1([tag]标签1,[star]标签2) // 标签中包含[tag]和[star]图标
[tag]节点[yes]1.2[no] // 节点标题中包含[tag]图标
节点2
节点2.1([checked]标签5,[unchecked]标签6)
节点2.2([arrow]标签7) //[star]{color:red} // 标识包含[star]图标
</LiteTree>
- 根节点
- 节点1
- 节点1.1标签1标签2标签中包含和图标
- 节点1.2 节点标题中包含图标
- 节点2
- 节点2.1标签5标签6
- 节点2.2标签7// 标识包含图标
- 节点1
自定义图标
LiteTree
支持自定义图标,有两种方式:
- 嵌入图标数据
在使用lite
格式时,可以在变量声明区
指定图标数据
。
ts
<LiteTree>
github=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuOTk5IDFDNS45MjYgMSAxIDUuOTI1IDEgMTJjMCA0Ljg2IDMuMTUyIDguOTgzIDcuNTIzIDEwLjQzN2MuNTUuMTAyLjc1LS4yMzguNzUtLjUzYzAtLjI2LS4wMDktLjk1Mi0uMDE0LTEuODdjLTMuMDYuNjY0LTMuNzA2LTEuNDc1LTMuNzA2LTEuNDc1Yy0uNS0xLjI3LTEuMjIxLTEuNjEtMS4yMjEtMS42MWMtLjk5OS0uNjgxLjA3NS0uNjY4LjA3NS0uNjY4YzEuMTA1LjA3OCAxLjY4NSAxLjEzNCAxLjY4NSAxLjEzNGMuOTgxIDEuNjggMi41NzUgMS4xOTUgMy4yMDIuOTE0Yy4xLS43MS4zODQtMS4xOTUuNjk4LTEuNDdjLTIuNDQyLS4yNzgtNS4wMS0xLjIyMi01LjAxLTUuNDM3YzAtMS4yLjQyOC0yLjE4MyAxLjEzMi0yLjk1MmMtLjExNC0uMjc4LS40OTEtMS4zOTcuMTA4LTIuOTFjMCAwIC45MjMtLjI5NyAzLjAyNSAxLjEyN0ExMC41MzYgMTAuNTM2IDAgMCAxIDEyIDYuMzJhMTAuNDkgMTAuNDkgMCAwIDEgMi43NTQuMzdjMi4xLTEuNDI0IDMuMDIyLTEuMTI4IDMuMDIyLTEuMTI4Yy42IDEuNTE0LjIyMyAyLjYzMy4xMSAyLjkxMWMuNzA1Ljc2OSAxLjEzIDEuNzUxIDEuMTMgMi45NTJjMCA0LjIyNi0yLjU3MiA1LjE1Ni01LjAyMiA1LjQyOGMuMzk1LjM0Ljc0NyAxLjAxLjc0NyAyLjAzN2MwIDEuNDctLjAxNCAyLjY1Ny0uMDE0IDMuMDE3YzAgLjI5NS4xOTkuNjM3Ljc1Ni41M0MxOS44NTEgMjAuOTc5IDIzIDE2Ljg1OSAyMyAxMmMwLTYuMDc1LTQuOTI2LTExLTExLjAwMS0xMSIvPjwvc3ZnPg==
---
我的开源项目
[github]VoerkaI18n // [github]
SpeedForm //[github]{color:red}
以上在---
配置了github
图标变量数据,然后在节点标题
/注释
/标识
中使用[github]
指定了图标。
如果使用JSON
格式,同样可以在data
属性中指定
图标数据`。
tsx
<LiteTree data={`
github=data:image/svg+xml;base64,图标数据
---
{
title:"我的开源项目",
children:[
{ title:"VoerkaI18n",
commect: "[github]",
icon: "github"
},
{ title:"SpeedForm",
commect: "[github]{color:red}",
}
`}/>
渲染效果如下:
- 我的开源项目
- VoerkaI18n
- SpeedForm
- 使用
css
图标
自定义图标时,可以使用css
图标,只需在编写一个包含图标的css
样式文件然后导入即可,如下:
css
/* custom-icon.css */
:root{
--lite-tree-icon-myicon: url('图标路径或数据');
}
.lite-icon .icon .myicon{
mask-image: var('--lite-tree-icon-myicon');
-webkit-mask-image: var('--lite-tree-icon-myicon');
-moz-mask-image: var('--lite-tree-icon-myicon');
}
接来在您的应用中导入该css
文件即可。
指定图标样式
允许单独为图标指定样式,如[{color:red}图标名]
,显示红色图标。
tsx
<LiteTree>
内置图标
[{color:red}file] file
[{color:blue}folder] folder
[{color:yellow}folder-open] folder-open
[{color:green}tag] tag
[{color:orange}star] star
[{color:purple}yes] yes
[{color:pink}no] no
[{color:red}checked] checked
[unchecked] unchecked
[arrow] arrow
</LiteTree>
渲染效果如下:
- 内置图标
- file
- folder
- folder-open
- tag
- star
- yes
- no
- checked
- unchecked
- arrow
扩展图标包
@lite-tree/icons
提供了一个专门用来显示支持文件类型的图标集,可以作为css
直接引入使用。
ts
// .vitepress/theme/index.ts
import '@lite-tree/icons/filetypes.css' // 引入图标样式
import { getFileTypeIcon } from "@lite-tree/icons"
// 在React组件中使用
<LiteTree getIcon={getFileTypeIcon}/>
// 在Vue组件中使用
<LiteTree :getIcon="getFileTypeIcon"/>
getFileTypeIcon
函数会根据文件扩展名返回对应的图标.
- 支持的文件类型
- ts
- tsx
- js
- jsx
- json
- vue
- md
- gif
- jpg
- jpeg
- png
- bmp
- webp
- ico
- tiff
- img
- txt
- svg
- java
- go
- less
- sass
- scss
- css
- htm
- yml
- com
- yaml
- zip
- py
- pyc
- dat
- db
- astro
- html
- yaml
- doc
- docx
- mp4
- avi
- mov
- wmv
- mpeg
- mpg
- rm
- ram
- swf
- flv
- video
- xls
- xlsx
- ppt
- pptx
- exe
- xml
- svelte
- tar
- gz
- bz2
- rar
- mp3
- ogg
- flac
- wav
- csv
- php
- vb
- cs
- kt
- h
- hpp
- hxx
- cpp
- c
如何读取图标数据?
访问https://icones.js.org/ ,选取图标,点击Data URL
复制图标数据即可。