概述

图标组件 <Icon />，根据 markdown.icon 配置，从不同的图标库加载图标。

主题还提供了 markdown 语法支持，点击了解更多

配置

.vuepress/config.ts

import { 
defineUserConfig
 } from 'vuepress'
import { 
plumeTheme
 } from 'vuepress-theme-plume'

export default 
defineUserConfig
({
  
theme
: 
plumeTheme
({
    
markdown
: { 
      
icon
: { 
provider
: 'iconify' } // 默认支持
    }
  })
})

interface IconOptions {
  /**
   * 图标提供商
   */
  provider: 'iconify' | 'iconfont' | 'fontawesome'
  /**
   * 图标默认前缀，不同的提供商默认前缀不同
   * - iconify - 默认为 `''`
   * - iconfont - 默认为 `iconfont icon-`
   * - fontawesome - 默认为 `fas`
   */
  prefix?: string
  /**
   * 图标资源地址
   */
  assets?: IconAssetLink | IconAssetLink[]
  size?: string | number
  color?: string
}

Props

nameOptionalstring

图标名称，当 markdown.icon.prefix 有值时，name 中的前缀可以省略

colorOptionalstring

'currentcolor'

图标颜色

sizeOptionalstring

'1em'

图标大小

示例

输入：

- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
- twitter - <Icon name="skill-icons:twitter" size="2em" />

输出：

• home -
• vscode -
• twitter -

贡献者

pengzhanbo

更新日志

2025/5/16 03:03

查看所有更新日志

• 14973-feat: add multiple provider support for icon, close #568 (#596)于 2025/5/16
• d1496-docs: update docs于 2025/4/30
• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• e3b1c-docs: improve docs于 2024/8/18