1***@qq.com
1***@qq.com
  • 发布:2023-11-11 19:23
  • 更新:2023-11-11 19:23
  • 阅读:223

如何在uniapp中使用iconPack的2600+高质量彩色图标

分类:uni-app

注意:需要是uniapp项目

安装

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

image.png

使用

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

2.修改vue组件标签,增加''前缀

复制得到的vue组件:

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

增加''前缀,修改为:

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

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

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

3.组件名称列表

全部组件名称列表查看地址http://chenmeizhou.gitee.io/atom-css-doc/components/icon/icon.html

属性配置示例

线条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"/>
0 关注 分享

要回复文章请先登录注册