PolyvIcon 保利威图标库工具（Vue2.x）

• 保利威前端图标库
• 适用平台：Vue2.x
• 搭配 @polyv/icons-cli 使用，使用文档

开发指南

安装

npm install @polyv/icons-vue --save

引用图标

vue 文件中引用图标

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

<script>
import { AddCircle } from 'outDir/add-circle/index.ts';

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

jsx / tsx 中引用图标

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

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

通过 map 文件创建图标应用

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

第一步：创建应用

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

export const PolyvIcon = createPolyvIconApp({
  iconMap,
});

第二步：使用图标

<template>
  <polyv-icon icon="add-circle" />
</template>

<script>
import { PolyvIcon } from 'xxxxx';

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

按需引入

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

第一步：安装 babel-plugin-import

npm install babel-plugin-import -D

第二步：配置 babel.config.js

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

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

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' |

createPolyvIconApp 调用参数

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

使用方式

图标类型与多色图标

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

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

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

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

<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 'map file';

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 设置图标颜色。

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

<script>
import { Camera } from 'map file';

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

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