注意：需要项目是使用uniapp开发的

安装

前往uniapp的插件市场导入插件，地址：https://ext.dcloud.net.cn/plugin?id=15331

使用

1. 前往iconpark官网：https://iconpark.bytedance.com/复制vue代码

2.修改vue组件标签，增加’i-'前缀

复制得到的vue组件：

<all-application theme="multi-color" size="24" :fill="['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']"/>

增加’i-'前缀，修改为：

<i-all-application theme="multi-color" size="24" :fill="['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']"/>

前后对比

// iconPack官网复制的vue组件代码
<all-application  theme="multi-color" size="24" :fill="['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']"/>
// 在项目中使用的vue组件代码
<i-all-application theme="multi-color" size="24" :fill="['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']"/>

'i-'前缀是为了解决组件名冲突的问题

<all-application/> 改为 <i-all-application/>即可使用

属性配置示例

线条outline

<ICamera></ICamera>
<ICamera theme="outline"/>
<ICamera theme="outline" fill="#2F88FF"/>

填充filled

<ICamera theme="filled" fill="#333"/>

双色two-tone

<ICamera theme="two-tone" :fill="['#333' ,'#2F88FF']"/>

多色multi-color

<ICamera theme="multi-color" :fill="['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']"/>

线条粗细strokeWidth

<ICamera :strokeWidth="1"></ICamera>
<ICamera :strokeWidth="2"></ICamera>
<ICamera :strokeWidth="3"></ICamera>
<ICamera :strokeWidth="4"></ICamera>

尺寸size

<ICamera :size="20"></ICamera>
<ICamera size="20"></ICamera>
<ICamera size="20px"></ICamera>
<ICamera size="40rpx"></ICamera>
<ICamera size="2em"></ICamera>

端点类型strokeLinecap

<ICamera ></ICamera>
<camera strokeLinecap="round"/>
<camera strokeLinecap="butt"/>
<camera strokeLinecap="square"/>

拐点类型strokeLinejoin

<camera strokeLinejoin="round"/>
<camera strokeLinejoin="miter"/>
<camera strokeLinejoin="bevel"/>