Former-commit-id: d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly d5c2b85bf62d6c02743adad20c6de71ae556a82d [formerly 074099c4c153f024958d3fda5cf710028e03d10a [formerly e73af225c96eb997a86122fc729dfadcdf846a4e]]]]] Former-commit-id: d84a01a4aca85cd9e3891825ac7a152e12280d4e Former-commit-id: 0412c82e909316b780fdd364ecabc78166c7cc0a Former-commit-id: 9e648fdbc93f347265fed8bb56948adda020e1c9 [formerly 8b530e6e6979a9c25832339725619d9d0c8ce76f] Former-commit-id: c12a2ae03243dd387e8c1d6496d6b3bb4148e149 Former-commit-id: 704f81678c7570f204cbe089e7497055c27e1328 Former-commit-id: 3879c040dcf291ef0f44745a5e791b360cde0f40 Former-commit-id: 0871c460804ea97eadf60bf3f0eaa8e147f3fb66 Former-commit-id: 188dd73a6cf49ecbf4cdedce1933f5a856c72b6f
34 lines
1.1 KiB
Markdown
34 lines
1.1 KiB
Markdown
# 图标 - SVG
|
||
|
||
## 参数
|
||
|
||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
||
| --- | --- | --- | --- | --- | --- |
|
||
| name | 图标名称 | 非 | String | src/assets/icons/svg 中 .svg 文件名 | 空 |
|
||
|
||
## 使用方法
|
||
|
||
首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下
|
||
|
||
然后使用组件
|
||
|
||
``` vue
|
||
<d2-icon-svg name="刚才的svg文件名"/>
|
||
```
|
||
|
||
## 获取已经注册的所有图标
|
||
|
||
你已经发现了,只需要将图标文件放入项目中就会自动注册
|
||
|
||
这是因为已经对 `webpack` 和 `svg-sprite-loader` 进行了相关设置,`src/assets/icons/svg` 文件夹中的图标会自动注册到项目中,文件全部打包成 svg-sprite,名称注册到 `Vue.$IconSvg` 属性中
|
||
|
||
所以如果你需要检查项目中已经注册的所有图标,可以通过如下方式
|
||
|
||
``` js
|
||
// 在 vue 单文件组件中
|
||
console.log(this.$IconSvg)
|
||
```
|
||
|
||
## 参考
|
||
|
||
演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878) |