如何在uniapp中使用iconpark的多主题彩色icon图标?

384 阅读1分钟

此项目为uniapp专用组件

安装

前往uniapp的插件市场导入插件,地址:ext.dcloud.net.cn/plugin?id=1…

image.png

使用

1. 前往iconpark官网: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']"/>

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

改为 即可使用

3.组件名称列表

全部组件名称列表查看地址chenmeizhou.gitee.io/atom-css-do…

属性配置示例

线条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"/>