# 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
图标宽度