Files
mes-ui-d2/static/markdownFiles/article/组件 - 图标组件 - svg.md
李杨 1fdf438bbb no message
Former-commit-id: fb13d7f9cd83b1c2276ea4cf2ed6ba61ad59a109
Former-commit-id: eafec517b3c0696bb1ef94be0542af39564c668a
Former-commit-id: bd3cee0c445356ed4e9cc4e3585f6405d5a20296
2018-02-22 18:27:31 +08:00

34 lines
1.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| name | 图标名称 | 非 | String | 放在 src/assets/icons/svg 中的 .svg 文件名 | 空 |
## 使用方法
首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下
然后使用组件
```
<IconSvg name="刚才的svg文件名"></IconSvg>
```
## 获取已经注册的所有图标
你已经发现了,只需要将图标文件放入项目中就会自动注册
这是因为D2Admin已经配置好 `webpack``svg-sprite-loader` 相关设置,`src/assets/icons/svg` 文件夹中的图标会自动注册,全部打包成 svg-sprite同时名称会自动注册到 `Vue.$IconSvg` 属性中
所以如果你需要检查项目中已经注册的所有图标,可以通过如下方式
```
// 在 vue 单文件组件中
console.log(this.$IconSvg)
```
## 参考
演示图标来源 [iconfont.cn @小啊小二饼 《2.5D工作日记》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=8219)