Icon
Overview
The <Icon /> component loads icons from different icon libraries based on the markdown.icon configuration.
The theme also provides markdown syntax support. Click to learn more
Configuration
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
markdown: {
icon: { provider: 'iconify' } // Enabled by default
}
})
})interface IconOptions {
/**
* Icon provider
*/
provider: 'iconify' | 'iconfont' | 'fontawesome'
/**
* Default icon prefix. Different providers have different default prefixes
* - iconify - Default: `''`
* - iconfont - Default: `iconfont icon-`
* - fontawesome - Default: `fas`
*/
prefix?: string
/**
* Icon asset links
*/
assets?: IconAssetLink | IconAssetLink[]
size?: string | number
color?: string
}Props
Icon name. Supports iconify icon names, icon links (https://… or /…), and inline SVG objects { svg: '<svg>…</svg>' }. When markdown.icon.prefix has a value, the prefix in name can be omitted.
Icon provider. You can also force a specific provider by using the iconify / iconfont / fontawesome prefix followed by a space in name.
Icon color.
Icon size. A number is treated as px, and the 20x20 form is also supported to specify width and height separately.
Extra CSS class name. Fontawesome icons automatically prepend the fa- prefix for class names without it.
Examples
Input:
- 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" />Output:
- home -
- vscode -
- twitter -
