Icons
Overview
The theme supports icons from the following sources:
- iconify - Supported by default
- iconfont - Optional
- fontawesome - Optional
Icons are used in the same way across the following theme features:
Provides syntax sugar and component support:
Markdown Icon Syntax Sugar Support
Theme Optimization for Icons
The theme employs the same parsing strategy internally for all the different ways of using icons mentioned above. Even if you use the same icon in different locations, the same icon resources will not be loaded repeatedly.
Configuration
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
markdown: {
icon: { provider: 'iconify' } // Supported by default
}
})
})Configuration Options
provider
- Type:
'iconify' | 'iconfont' | 'fontawesome' - Default:
'iconify'
Icon provider
prefix
Type:
stringDefault:
''(Different icon providers have different default values)Details:
Icon prefix
When provider is
iconify, defaults to''. Set the iconify collection as prefix, e.g.,mdi.When provider is
iconfont, defaults to'iconfont icon-'When provider is
fontawesome, defaults to'fas'. Optional values are: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
Type:
(string | FontAwesomeAssetBuiltIn)[] | string | FontAwesomeAssetBuiltIntype FontAwesomeAssetBuiltIn = 'fontawesome' | 'fontawesome-with-brands'Default:
undefinedDetails:
- For
iconify: No configuration needed; - For
iconfont: Set to the resource URL of iconfont; - For
fontawesome: Set to the resource URL of fontawesome. Optional values arefontawesomeorfontawesome-with-brands, or custom resource URLs.
- For
size
Type:
string | numberDefault:
1emDetails:
Default icon size
color
Type:
stringDefault:
'currentColor'Details:
Default icon color
