注意:需要是uniapp项目
安装
https://ext.dcloud.net.cn/plugin?id=15331
前往uniapp的插件市场导入插件,地址:https://ext.dcloud.net.cn/plugin?id=15331
使用
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 个评论
要回复文章请先登录或注册