图标
约 526 字大约 2 分钟
2024-07-22
概述
主题支持以下来源的图标:
- iconify - 默认支持
- iconfont - 可选
- fontawesome - 可选
在主题的以下功能中以相同的方式使用图标:
提供语法糖和组件支持:
主题对图标的优化
上述的不同的使用图标的方式,主题在内部都采取了相同的解析策略,即使您在不同的位置使用了相同的图标, 也不会重复加载相同的图标资源。
配置
.vuepress/config.ts
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
markdown: {
icon: { provider: 'iconify' } // 默认支持
}
})
})
配置项
provider
- 类型:
'iconify' | 'iconfont' | 'fontawesome'
- 默认值:
'iconify'
图标提供商
prefix
类型:
string
默认值:
''
(不同的图标提供商有不同的默认值)详情:
图标前缀
提供商为
iconify
时,默认为''
,设置iconify
的图标集作为前缀,比如mdi
。提供商为
iconfont
时,默认为'iconfont icon-'
提供商为
fontawesome
时默认为'fas'
,可选值如下:type FontAwesomePrefix = | 'fas' | 's' // fa-solid fa-name | 'far' | 'r' // fa-regular fa-name | 'fal' | 'l' // fa-light fa-name | 'fat' | 't' // fa-thin fa-name | 'fads' | 'ds' // fa-duotone fa-solid fa-name | 'fass' | 'ss' // fa-sharp fa-solid fa-name | 'fasr' | 'sr' // fa-sharp fa-regular fa-name | 'fasl' | 'sl' // fa-sharp fa-light fa-name | 'fast' | 'st' // fa-sharp fa-thin fa-name | 'fasds' | 'sds' // fa-sharp-duotone fa-solid fa-name | 'fab' | 'b' // fa-brands fa-name
assets
类型:
(string | FontAwesomeAssetBuiltin)[] | string | FontAwesomeAssetBuiltin
type FontAwesomeAssetBuiltin = 'fontawesome' | 'fontawesome-with-brands'
默认值:
undefined
详情:
iconify
时,不需要设置;iconfont
时,设置为 iconfont 的资源地址;fontawesome
时,设置为fontawesome
的资源地址,可选值为fontawesome
或fontawesome-with-brands
, 或者自定义资源地址。
size
类型:
string | number
默认值:
1em
详情:
图标的默认尺寸
color
类型:
string
默认值:
'currentColor'
详情:
图标的默认颜色
贡献者
更新日志
2025/5/16 03:03
查看所有更新日志
14973
-feat: add multiple provider support for icon, close #568 (#596)于0fd6c
-refactor(theme): improve types and flat config (#524)于f0b21
-docs: improve docs (#390)于b721b
-feat(plugin-md-power): add supportnpm-to
container (#256)于ca21d
-feat: add support optional icon for file-tree and code-tabs (#216)于1beb8
-chore: tweak于eff4e
-feat: add support optional icon forfile-tree
andcode-tabs
于87466
-docs: update docs于