Skip to content

图标

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// 标识包含图标

自定义图标

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
    • pdf
    • 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复制图标数据即可。