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>