# SVG图标
引入全局组件 SvgIcon.
# Introduce
通过 svgIconsDir 指定自定义的图标目录。如果传入的是相对路径,则会基于 .vuepress 目录进行解析。
// microapp/config/vuepress.js
module.exports = {
svgIconsDir: "icons"
}
目录结构如下:
.
├─ docs
│ └─ .vuepress
│ └─ icons
│ └─ home.svg
│ └─ tags.svg
│ └─ ...
└─ package.json
# Usage
我们已经内置了一部分图标,部分展示如下:
| name | code | icon |
|---|---|---|
| author | <SvgIcon name="author"/> | |
| beian | <SvgIcon name="beian"/> | |
| category | <SvgIcon name="category"/> | |
| copy | <SvgIcon name="copy"/> | |
| copyright | <SvgIcon name="copyright"/> | |
| date | <SvgIcon name="date"/> | |
| doc | <SvgIcon name="doc"/> | |
| friend | <SvgIcon name="friend"/> | |
| github | <SvgIcon name="github"/> | |
| guide | <SvgIcon name="guide"/> | |
| help | <SvgIcon name="help"/> | |
| home | <SvgIcon name="home"/> | |
| info | <SvgIcon name="info"/> | |
| link | <SvgIcon name="link"/> | |
| more | <SvgIcon name="more"/> | |
| package | <SvgIcon name="package"/> | |
| rss | <SvgIcon name="rss"/> | |
| run | <SvgIcon name="run"/> | |
| tags | <SvgIcon name="tags"/> | |
| zap | <SvgIcon name="zap"/> |
使用方式如下:
<SvgIcon name="tags"/>
<SvgIcon name="tags" size="20"/>
<SvgIcon name="tags" size="32"/>
# Options
# name
- 类型:
string - 默认值:
undefined
图标的名称,对应图标文件名称。
# size
- 类型:
string | Numebr - 默认值:
14
图标大小尺寸
# height
- 类型:
string | Numebr - 默认值:
null
图标高度
# width
- 类型:
string | Numebr - 默认值:
null
图标宽度