npm package: @polyv/icons-vue-next
Description: Polyv Icons for Vue3
Latest version: 1.4.0

# PolyvIcon 保利威图标库（Vue3.x）

- 保利威前端图标库
- 适用平台：Vue3.x

## 开发指南

### 安装

```
npm install @polyv/icons-vue-next --save
```

### 引用图标

#### vue 文件中引用图标

```html
<template>
  <icon-add-circle type="filled" />
</template>

<script>
import { AddCircle } from '@polyv/icons-vue-next';

export default {
  components: {
    IconAddCircle: AddCircle,
  },
};
</script>
```

#### jsx / tsx 中引用图标

```tsx
import { defineComponent } from 'vue';
import { AddCircle } from '@polyv/icons-vue-next';

export default defineComponent({
  setup() {
    return () => {
      return (
        <AddCircle type="filled" />
      );
    };
  },
});
```

### 引入样式

引入图标所需的样式文件。

```js
import '@polyv/icons-vue-next/styles/index.css';
```

### 按需加载

按需加载需要借助 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 以达到减少项目构建后的体积。

第一步：安装 babel-plugin-import

```
npm install babel-plugin-import -D
```

第二步：配置 babel.config.js 或 .babelrc

```js
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: '@polyv/icons-vue-next',
        libraryDirectory: 'icons',
      }
    ],
  ]
};
```

### 全局加载

你可以引入 `@polyv/icons-vue-next/icon` 来加载全局的图标。

如无特殊情况，请使用按需加载的方式引入图标库，因为按需加载可以减少项目构建后的体积。

```html
<template>
  <div class="demo-icon">
    <polyv-icon icon="Camera" />
    <!-- 支持横线格式 -->
    <polyv-icon icon="add-circle" />
  </div>
</template>

<script>
import { PolyvIcon } from '@polyv/icons-vue-next/icon';

export default {
  components: {
    PolyvIcon,
  },
};
</script>
```

你也可以在项目入口全局安装图标库：

```js
import { createApp } from 'vue';
import { installIcon } from '@polyv/icons-vue-next';

const app = createApp();

/**
 * 全局安装图标库
 * 1. 安装 <polyv-icon /> 组件；
 * 2. 安装各图标组件；
 */
installIcon(app); // 默认前缀：icon，即使用 Camera 图标时，组件名为 <icon-camera />
installIcon(app, { prefix: 'polyv-icon' }); // 自定义前缀，即使用 Camera 图标时，组件名为 <polyv-icon-camera />

app.mount('#app');
```

如果你使用[图标库脚手](https://npm-registry.polyv.net/-/web/detail/@polyv/icons-cli)架生成项目定制的图标，那么你可以在调用 `installIcon` 时传入 `customIcons`。

```js
import { createApp } from 'vue';
import { installIcon } from '@polyv/icons-vue-next';
import * as IconMap from '脚手架生成的 map 文件';

const app = createApp();

installIcon(app, {
  customIcons: IconMap,
});
```

此时在组件中使用图标（以 `custom-a.svg` 文件为例）：

```html
<template>
  <div class="demo-icon">
    <custom-a />
    <polyv-icon icon="custom-a" />
  </div>
</template>
```

## 组件参数

| 参数 | 说明 | 类型 | 默认值 |
| - | - | - | - |
| size | 图标大小，支持使用 css 设置 | `number` | `24` |
| type | 图标类型 | `'outline' \| 'filled' \| 'two-tone' \| 'multi-color'` | `'outline'` |
| color | 图标颜色，最多不超过 4 个颜色 | `string \| string[]` | `'currentColor'` |
| strokeLinecap | 图标端点类型（圆润、正常、方形） | `'round' \| 'butt' \| 'square'` | `'round'` |
| strokeLinejoin | 图标拐点类型（圆润、斜面、尖锐） | `'round' \| 'bevel' \| 'miter'` | `'round'` |


## 使用方式

### 图标类型与多色图标

颜色数组的 4 个项分别为：外部描边色 (outStrokeColor)、外部填充色 (outFillColor)、内部描边色 (innerStrokeColor)、内部填充色 (innerFillColor)。

图标类型共分为 4 种，个别图标可能不支持所有类型的设置，具体情况请见图标汇总页：

- `outline`：线性图标。
- `filled`：填充图标。
- `two-tone`：双色图标。
- `multi-color`：四色图标。

各类型的颜色设置可见示例代码：

```html
<template>
  <div class="demo-icon">
    <!-- 线性图标 -->
    <icon-camera type="outline" color="#333" />
    <!-- 填充图标 -->
    <icon-camera type="filled" color="#333" />
    <!-- 双色图标 -->
    <icon-camera type="two-tone" :color="['#333', '#2F88FF']" />
    <!-- 四色图标 -->
    <icon-camera type="multi-color" :color="['#333', '#2F88FF', '#FFF', '#43CCF8']" />
  </div>
</template>

<script>
import { Camera } from '@polyv/icons-vue-next';

export default {
  components: {
    IconCamera: Camera,
  },
};
</script>
```

### 图标的 className 规则

每个图标都有一个 `polyv-icon` 的公用 class 以及 `polyv-icon-[name]` 的 class 属性，如：`Camera` 的 class 为 `polyv-icon polyv-icon-camera`。

你可以通过 css 样式的 `font-size`、`color` 去设置图标的大小和颜色。

> 仅 `outline` 和 `filled` 两种图标类型支持 css 设置图标颜色。

```html
<template>
  <div class="demo-icon">
    <icon-camera />
  </div>
</template>

<script>
import { Camera } from '@polyv/icons-vue-next';

export default {
  components: {
    IconCamera: Camera,
  },
};
</script>

<style>
.demo-icon .polyv-icon-camera {
  font-size: 36px !important;
  color: #2196f3;
}
</style>
```