@polyv/icons-svg
v1.1.0
Published
Polyv Icons for Svg
Downloads
2
Readme
PolyvIcon 保利威图标库工具(SVG)
- 保利威前端图标库
- 适用平台:所有平台
- 搭配
@polyv/icons-cli
使用,使用文档
开发指南
安装
npm install @polyv/icons-svg --save
引用图标
通过 @polyv/icons-svg
工具创建的图标均为方法,调用图标方法后返回图标的 dom 结构字符串模板,调用后需要手动插入到 dom 节点中。
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
来创建一个图标应用。
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 以达到减少项目构建后的体积。
第一步:安装 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'
|
| 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
:四色图标。
各类型的颜色设置可见示例代码:
// 线性图标
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 设置图标颜色。
// 调用图标方法获取图标节点字符串模板
const iconTemp = Camera({
type: 'filled',
});
// 插入 dom 节点
document.querySelector('.demo-icon').innerHTML = iconTemp;
设置图标样式:
<style>
.demo-icon .polyv-icon-add-circle {
font-size: 36px;
color: #2196f3;
}
</style>