npm package: @polyv/icons-svg
Description: Polyv Icons for Svg
Latest version: 1.4.0

# PolyvIcon 保利威图标库工具（SVG）

- 保利威前端图标库
- 适用平台：所有平台
- 搭配 `@polyv/icons-cli` 使用，[使用文档](https://npm-registry.polyv.net/-/web/detail/@polyv/icons-cli)

## 开发指南

### 安装

```
npm install @polyv/icons-svg --save
```

### 引用图标

通过 `@polyv/icons-svg` 工具创建的图标均为方法，调用图标方法后返回图标的 dom 结构字符串模板，调用后需要手动插入到 dom 节点中。

```js
import { AddCircle } from 'outDir/add-circle/index.ts';

// 调用图标方法获取图标节点字符串模板
const iconTemp = AddCircle({
  type: 'filled',
});

// 插入 dom 节点
document.getElementById('xxx').innerHTML = iconTemp;
```

### 通过 map 文件创建图标应用

你可以通过脚手架生成的 map 文件以及 `@polyv/icons-svg` 提供的 `createPolyvIconApp` 来创建一个图标应用。

```js
import * as iconMap from 'map file';
import { createPolyvIconApp } from '@polyv/icons-svg/icon';

const PolyvIcon = createPolyvIconApp({
  iconMap,
});

// 无需单独引入图标组件
const iconTemp = PolyvIcon({
  icon: 'add-circle',
});

// 插入 dom 节点
document.getElementById('xxx').innerHTML = iconTemp;
```

### 按需引入

由于生成的图标是自动触发函数的原因，通过 map 文件引入图标，在项目打包的时候会将所有的图标打包到一起，可能会造成资源浪费，因此你可以通过 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 以达到减少项目构建后的体积。

第一步：安装 babel-plugin-import

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

第二步：配置 babel.config.js

```js
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: '[outDir]/map',
        customName: (name) => {
          return `[outDir]/icons/${name}`;
        }
      }
    ],
  ]
};
```

注意！如果你配置了 `mapExportPrefix` 时，你需要在 `customName` 中进行字符串处理，如你配置了 `mapExportPrefix: 'MyIcon'`：

```js
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: '[outDir]/map',
        customName: (name) => {
          const iconName = name.replace('my-icon-', '');
          return `[outDir]/icons/${iconName}`;
        }
      }
    ],
  ]
};
```

## 调用参数

### 图标参数

| 参数 | 说明 | 类型 | 默认值 |
| - | - | - | - |
| 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'` |
| onlySvg | 仅生成 svg 模板，不会添加 `<span>` 节点 | `boolean` | `false` |
| setXmlns | 设置 xml 报文头 | `boolean` | `false` |

### `createPolyvIconApp` 调用参数

| 参数 | 说明 | 类型 | 默认值 |
| - | - | - | - |
| iconMap | 通过脚手架生成的 map 文件导出 | `object` | `{}` |
| mapExportPrefix | map 文件导出前缀，同脚手架配置一致 | `string` | - |

## 使用方式

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

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

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

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

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

```js
// 线性图标
const iconTemp = Camera({ type: 'outline', icon: '#333' });
// 填充图标
const iconTemp = Camera({ type: 'filled', icon: '#333' });
// 双色图标
const iconTemp = Camera({ type: 'two-tone', icon: ['#333', '#2F88FF'] });
// 四色图标
const iconTemp = Camera({ type: 'multi-color', icon: ['#333', '#2F88FF', '#FFF', '#43CCF8'] });
```

### 图标的 className 规则

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

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

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

```js
// 调用图标方法获取图标节点字符串模板
const iconTemp = Camera({
  type: 'filled',
});

// 插入 dom 节点
document.querySelector('.demo-icon').innerHTML = iconTemp;
```

设置图标样式：

```html
<style>
.demo-icon .polyv-icon-add-circle {
  font-size: 36px;
  color: #2196f3;
}
</style>
```