@polyv/icons-vue-next
v1.1.0
Published
Polyv Icons for Vue3
Downloads
4
Readme
PolyvIcon 保利威图标库(Vue3.x)
- 保利威前端图标库
- 适用平台:Vue3.x
开发指南
安装
npm install @polyv/icons-vue-next --save
引用图标
vue 文件中引用图标
<template>
<icon-add-circle type="filled" />
</template>
<script>
import { AddCircle } from '@polyv/icons-vue-next';
export default {
components: {
IconAddCircle: AddCircle,
},
};
</script>
jsx / tsx 中引用图标
import { defineComponent } from 'vue';
import { AddCircle } from '@polyv/icons-vue-next';
export default defineComponent({
setup() {
return () => {
return (
<AddCircle type="filled" />
);
};
},
});
引入样式
引入图标所需的样式文件。
import '@polyv/icons-vue-next/styles/index.css';
按需加载
按需加载需要借助 babel-plugin-import 以达到减少项目构建后的体积。
第一步:安装 babel-plugin-import
npm install babel-plugin-import -D
第二步:配置 babel.config.js 或 .babelrc
module.exports = {
plugins: [
[
'import',
{
libraryName: '@polyv/icons-vue-next',
libraryDirectory: 'icons',
}
],
]
};
全局加载
你可以引入 @polyv/icons-vue-next/icon
来加载全局的图标。
如无特殊情况,请使用按需加载的方式引入图标库,因为按需加载可以减少项目构建后的体积。
<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>
你也可以在项目入口全局安装图标库:
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');
如果你使用图标库脚手架生成项目定制的图标,那么你可以在调用 installIcon
时传入 customIcons
。
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
文件为例):
<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
:四色图标。
各类型的颜色设置可见示例代码:
<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 设置图标颜色。
<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>