152 lines
3.5 KiB
Markdown
152 lines
3.5 KiB
Markdown
# IconPark 图标
|
||
> IconPark图标体系
|
||
|
||
## 介绍
|
||
|
||
### 新特性
|
||
* 提供超过2000图标
|
||
* 支持4种主题:
|
||
* 线性
|
||
* 填充
|
||
* 双色
|
||
* 四色
|
||
|
||
### 更多图标
|
||
请访问[IconPark图标网站](http://iconpark.bytedance.com), 提供更多便捷的操作：
|
||
* 复制SVG源文件
|
||
* 复制React图标组件
|
||
* 复制Vue图标组件
|
||
* 下载PNG
|
||
* 下载SVG
|
||
## 快速上手
|
||
### 安装
|
||
|
||
```
|
||
npm install @icon-park/vue --save
|
||
```
|
||
|
||
### 引用图标
|
||
在组件的上方引用`@icon-park/vue`，并在组件的模板函数中使用:
|
||
|
||
``` vue
|
||
<template>
|
||
<home theme="filled"/>
|
||
</template>
|
||
<script>
|
||
import {Home} from '@icon-park/vue';
|
||
|
||
export default {
|
||
components: {
|
||
Home
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
如果你不想引用，那么你可以全局安装图标
|
||
|
||
|
||
```typescript
|
||
import {install} from '@icon-park/vue/es/all';
|
||
import Vue from 'vue';
|
||
|
||
// Install
|
||
install(Vue); // 默认前缀是 'icon', 例如: 对于`People`这个icon, 组件名字是`icon-people`.
|
||
install(Vue, 'i'); // 使用自定义前缀'i', 例如: 对于`People`这个icon，组件名字是`i-people`.
|
||
```
|
||
|
||
|
||
### Style Sheet
|
||
|
||
引用预设样式
|
||
|
||
```typescript
|
||
import '@icon-park/vue/styles/index.css';
|
||
```
|
||
|
||
### 全局
|
||
你可以使用Vue提供的`provide`属性来设置全局配置。
|
||
|
||
```html
|
||
<template>
|
||
<div>
|
||
<home/>
|
||
</div>
|
||
</template>
|
||
<script lang="ts">
|
||
import {DEFAULT_ICON_CONFIGS} from '@icon-park/vue'
|
||
import {Home} from '@icon-park/vue';
|
||
|
||
const IconConfig = {...DEFAULT_ICON_CONFIGS, prefix: 'icon'}
|
||
|
||
export default {
|
||
name: 'App',
|
||
provide () {
|
||
return {
|
||
ICON_CONFIGS: IconConfig
|
||
}
|
||
},
|
||
components: {
|
||
Home
|
||
}
|
||
};
|
||
</script>
|
||
|
||
```
|
||
|
||
### 按需加载
|
||
|
||
可以使用[babel-plugin-import](https://github.com/ant-design/babel-plugin-import)来按需加载图标
|
||
|
||
配置如下:
|
||
```json
|
||
{
|
||
"plugins": [
|
||
[
|
||
"import",
|
||
{
|
||
"libraryName": "@icon-park/vue",
|
||
"libraryDirectory": "es/icons",
|
||
"camel2DashComponentName": false
|
||
}
|
||
]
|
||
]
|
||
}
|
||
```
|
||
|
||
|
||
### 使用Icon组件
|
||
我们更推荐使用按需加载的方式来加载图标，因为这样可以大幅度缩减编译后代码体积，
|
||
但是在有些类似远程加载的菜单的场景下，直接引用全部图标可以缩减开发成本。
|
||
|
||
使用方式：
|
||
|
||
``` vue
|
||
<template>
|
||
<icon-park type="AddText" theme="filled"/>
|
||
<icon-park type="add-text" theme="filled"/>
|
||
</template>
|
||
<script>
|
||
import {IconPark} from '@icon-park/vue/es/all';
|
||
|
||
export default {
|
||
components: {
|
||
IconPark
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
### 将IconPark嵌入到你的项目中
|
||
如果你的项目中需要使用到图标名称，作者，分类，标签以及创建时间等额外的信息，你可以使用位于每个NPM根目录的`icons.json`文件。
|
||
|
||
## 属性
|
||
| 属性名称 | 介绍 | 类型 | 默认值 | 注释 |
|
||
| ---------- | --- | --- | --- | --- |
|
||
| theme | 图标主题 | 'outline' | 'filled' | 'two-tone' | 'multi-color' | 'outline' |
|
||
| size | 图标的大小，宽高相同 | number | string | '1em' |
|
||
| spin | 给图标加旋转效果 | boolean | false |
|
||
| fill | 图标的颜色，不超过4个颜色，默认为当前颜色 | string | string[]| 'currentColor' |
|
||
| strokeLinecap | svg元素的stroke-linecap属性 | 'butt' | 'round' | 'square' | 'round' |
|
||
| strokeLinejoin | svg元素的stroke-linejoin属性 | 'miter' | 'round' | 'bevel' | 'round' |
|
||
| strokeWidth | svg元素的stroke-width属性 | number | 4 |
|