微信小程序uniapp实现小图标转成SVN代码
实现效果
1.打开阿里巴巴矢量库，找到想要的图标，赋值SVN代码
iconfont-阿里巴巴矢量图标库
2.打开下方网址，将复制的svn代码赋值到网址指定位置，即可得到uniapp和小程序需要的SVN代码
https://codepen.io/jakob-e/pen/doMoML
3.代码
<template>
<view class="display ">
<view class="display justifybetween">
<view class="contentbox1item " v-for="(item,index) in list1" :key="index">
<view @click="golink(item.url)">
<view class="justifycenter display ">
<view class="images">
<view :class="item.src"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list1: [{
//对应style中的class名
src: 'recycling',
//url对应自己的界面路径
url: '/pages/recycling/recycling'
},
{
src: 'integral',
url: '/pages/integral/integral'
},
],
},
},
methods: {
golink(url) {
uni.navigateTo({
url: url
})
},
}
}
</script>
<style>
.recycling {
background-size: 50upx 50upx;
width: 50upx;
height: 50upx;
//svn代码块
background-image: url("data:image/svg+xml,%3Csvg t='1641898778587' class='icon' viewBox='0 0 1241 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2667' width='16' height='16'%3E%3Cpath d='M194.333316 827.233078a130.501274 130.501274 0 0 1-130.501274-130.501274v-204.016992q0-8.796753 0.77334-17.40017H63.832042l0.918342-1.933352a194.930237 194.930237 0 0 1 60.610592-123.106203l93.525913-189.903521h470.481261v136.833003h356.220146a130.501274 130.501274 0 0 1 130.501274 130.501274v399.672237z' fill='%23333333' p-id='2668'%3E%3C/path%3E%3Cpath d='M194.333316 891.227037A194.543567 194.543567 0 0 1 0.031418 696.876805v-204.161993c0-3.866704 0-7.781743 0.241669-11.648447a64.042292 64.042292 0 0 1 1.981687-22.523554 258.875861 258.875861 0 0 1 70.664023-146.209761l88.740867-180.23676a63.993958 63.993958 0 0 1 57.42056-35.718682h470.481261a63.993958 63.993958 0 0 1 63.993959 63.993958v72.839045h292.226187a194.543567 194.543567 0 0 1 194.301897 194.301897v399.672237a63.993958 63.993958 0 0 1-63.993958 63.993958z m-65.782309-410.837346v0.676674q-0.531672 5.84839-0.531672 11.745114v204.161994a66.410649 66.410649 0 0 0 66.313981 66.313981h917.762296V427.560842a66.410649 66.410649 0 0 0-66.313981-66.313981h-356.220146a63.993958 63.993958 0 0 1-63.993958-63.993958V224.413858h-366.853582l-75.932409 154.184839a63.993958 63.993958 0 0 1-13.630133 18.41518 130.936279 130.936279 0 0 0-40.745398 82.699141z' fill='%23333333' p-id='2669'%3E%3C/path%3E%3Cpath d='M564.280262 0h531.381856a145.581422 145.581422 0 0 1 145.581422 145.581422v368.786934H564.280262A145.581422 145.581422 0 0 1 418.69884 368.786935V145.581422A145.581422 145.581422 0 0 1 564.280262 0zM344.699784 975.956197a125.667894 125.667894 0 1 1 125.667894-125.667893 125.667894 125.667894 0 0 1-125.716227 125.667893z' fill='%23FFFFFF' p-id='2670'%3E%3C/path%3E%3Cpath d='M344.651451 772.954215a77.334089 77.334089 0 1 0 77.334088 77.334089 77.575758 77.575758 0 0 0-77.334088-77.334089m0-95.990937a173.470027 173.470027 0 1 1-173.470028 173.470027 173.470027 173.470027 0 0 1 173.470028-173.470027z' fill='%23333333' p-id='2671'%3E%3C/path%3E%3Cpath d='M917.310376 975.956197a125.667894 125.667894 0 1 1 125.667894-125.667893 125.667894 125.667894 0 0 1-125.667894 125.667893z' fill='%23F8FAF9' p-id='2672'%3E%3C/path%3E%3Cpath d='M917.310376 772.954215a77.334089 77.334089 0 1 0 77.334089 77.334089 77.575758 77.575758 0 0 0-77.334089-77.334089m0-95.990937a173.470027 173.470027 0 1 1-173.470027 173.470027 173.470027 173.470027 0 0 1 173.470027-173.470027z' fill='%23333333' p-id='2673'%3E%3C/path%3E%3Cpath d='M328.121289 307.258001L248.418844 470.867932a48.527141 48.527141 0 0 1-87.242519-42.533749l79.702445-163.609931a48.527141 48.527141 0 1 1 87.242519 42.485415z' fill='%23FFFFFF' p-id='2674'%3E%3C/path%3E%3C/svg%3E");
}
.integral {
background-size: 50upx 50upx;
width: 50upx;
height: 50upx;
background-image: url("data:image/svg+xml,%3Csvg t='1641898802211' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2813' width='16' height='16'%3E%3Cpath d='M312.178738 41.30972h402.177994a13.782633 13.782633 0 0 1 13.782633 13.782633v443.487715a13.782633 13.782633 0 0 1-13.782633 13.782633H312.178738a13.782633 13.782633 0 0 1-13.782633-13.782633V55.092353a13.782633 13.782633 0 0 1 13.782633-13.782633z' fill='%23FFFFFF' p-id='2814'%3E%3C/path%3E%3Cpath d='M714.318553 553.596063H312.140559a55.168711 55.168711 0 0 1-55.092353-55.015995V55.092353A55.168711 55.168711 0 0 1 312.140559 0h402.177994a55.168711 55.168711 0 0 1 55.092353 55.092353v443.487715a55.168711 55.168711 0 0 1-55.092353 55.015995z m-374.612728-82.61944h347.085641V82.61944H339.705825z' fill='%23FFFFFF' p-id='2815'%3E%3C/path%3E%3Cpath d='M507.159089 220.713023a5.497782 5.497782 0 0 1 9.888371 0l119.767645 245.185788c0.80176 1.641699 2.405279 2.78707 277.027105 39.858916a5.497782 5.497782 0 0 1 3.054323 9.468402l-198.760076 188.184482a5.535961 5.535961 0 0 0-1.641698 5.001454l48.869169 267.787778a5.497782 5.497782 0 0 1-7.979419 5.841393l-242.742329-128.777898a5.497782 5.497782 0 0 0-5.15417 0l-242.742329 128.777898a5.497782 5.497782 0 0 1-7.979419-5.841393l48.86917-267.787778a5.535961 5.535961 0 0 0-1.641699-5.001454l-198.760076-188.184482a5.497782 5.497782 0 0 1 3.054323-9.468402c274.660005-37.071847 276.225346-38.179039 277.027106-39.858916z' fill='%23333333' p-id='2816'%3E%3C/path%3E%3Cpath d='M264.225865 1023.923642a46.807502 46.807502 0 0 1-46.0821-55.168711l45.394877-248.736438-184.672011-174.859998a46.807502 46.807502 0 0 1 25.923568-80.405056c143.438649-19.356773 222.43108-30.275978 254.272398-35.162894l110.910108-227.050744a46.807502 46.807502 0 0 1 83.993885 0l110.910108 227.050744c31.879497 4.886917 110.719213 15.806122 254.310578 35.162894a46.807502 46.807502 0 0 1 25.923567 80.405056l-184.672011 174.859998 45.394877 248.698259a46.807502 46.807502 0 0 1-37.759069 54.481488 47.571082 47.571082 0 0 1-30.123262-4.619664l-226.096267-119.958539-225.981731 119.882181a47.074755 47.074755 0 0 1-21.647515 5.421424zM190.043992 536.606391l144.393125 136.757317a46.692964 46.692964 0 0 1 13.858991 42.378733l-35.582864 195.094888 177.456173-94.14951a47.609261 47.609261 0 0 1 43.867715 0l177.456173 94.14951-35.621044-195.094888a46.692964 46.692964 0 0 1 13.858991-42.378733l144.431304-136.757317c-85.062898-11.453712-137.940867-18.898624-167.529622-23.251035a712.611759 712.611759 0 0 1-32.98669-5.306887 44.974908 44.974908 0 0 1-33.941165-24.090973l-87.620894-179.441482-87.582715 179.441482a44.974908 44.974908 0 0 1-33.979345 24.090973c-5.841393 1.18355-15.997017 2.825249-32.986689 5.306887-29.512397 4.390589-82.390366 11.720965-167.491444 23.289214z' fill='%23333333' p-id='2817'%3E%3C/path%3E%3Cpath d='M383.764435 698.29462a41.157004 41.157004 0 0 1-29.206964-12.102755l-90.904292-90.904292a41.347899 41.347899 0 1 1 58.452109-58.452108l90.904291 90.904291a41.30972 41.30972 0 0 1-29.206965 70.516685z' fill='%23FFFFFF' p-id='2818'%3E%3C/path%3E%3C/svg%3E");
}
.display {
display: flex;
}
.justifycenter {
justify-content: center;
}
.justifybetween {
justify-content: space-between;
}
.contentbox1item {
width: 23%;
padding: 40upx 0upx;
}
.images image {
height: 50upx;
width: 50upx;
}
</style>
微信小程序uniapp实现小图标转成SVN代码相关推荐
- mpvue微信小程序中使用svg图标，并通过代码动态改变图标颜色
微信小程序,mpvue中使用svg图标,并通过代码改变图标颜色 本文主要是mpvue开发小程序的代码,不过微信小程序原生开发应该也是一样的,思路都是通用的,按照这个思路微信小程序原生开发一样可以实现同 ...
- uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示 举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标 实际发布后手机上的效果 (此处忽略位置 ...
- 基于uniapp开发的适用于微信小程序，头条小程序
基于的uni-app开发的跨平台商城小程序(微信小程序,头条小程序,抖音小程序),合理的代码结构和规范的编码风格,能够让你很轻松的上手并转化成为自己的作品. 与之相支持的是,我们提供了一套完整的项目代 ...
- 微信小程序uni-app
文章目录 一.微信小程序uni-app 二.下载微信开发者工具 三.小程序开发 一.微信小程序uni-app 小程序是一种不需要下载.安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一 ...
- 微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标 首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
- 使用uniapp做微信小程序，在小程序编辑器运行时编译报错：appid不合法，导致启用不了。
使用uniapp做微信小程序,在小程序编辑器运行时编译报错:appid不合法,导致启用不了.这个好坑爹啊,我这么淑女的小可爱都想骂人了,我好累,写个博客发泄发泄吧! 复现我的问题:神操作--代码跟别人 ...
- uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑
文章目录 微信支付宝小程序通用功能 1.checkbox样式 2.分享功能 支付宝小程序参数 微信小程序参数 其他兼容问题 H5 微信小程序 支付宝小程序 持续更新中... 微信支付宝小程序通用功能 ...
- 计算机毕业设计springboot+vue基本微信小程序的校园二手闲置物品交易小程序 uniapp
在大学校园里,存在着很多的二手商品,但是由于信息资源的不流通以及传统二手商品信息交流方式的笨拙,导致了很多仍然具有一定价值或者具有非常价值的二手商品的囤积,乃至被当作废弃物处理.现在通过微信小程序的校 ...
- 微信小程序-如何使用icon图标
原 微信小程序使用字体图标 2017年07月03日 19:29:09 阅读数:24209 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图 ...
- java基于微信小程序的超市购物商城系统 小程序 uniapp
随着社会的发展,社会的方方面面都在利用信息化时代的优势.互联网的优势和普及使得各种系统的开发成为必需. 本文以实际运用为开发背景,运用软件工程原理和开发方法,它主要是采用java语言技术和mysql数 ...
最新文章
- pandas 实现DataFrame的合并Merge
- 离线轻量级大数据平台Spark之JavaRDD关联join操作
- 【VS+QT开发】找不到到qhostinfo.h文件
- Kafka 0.9 新消费者API
- fedora下配置ipv6 dns服务器
- mysql8.0 tar安装_CentOS7安装MySQL8.0 tar包
- 圆周移位是怎么移的_【装修干货】马桶移位改造全攻略，总有一天你能用得上！赶紧收藏...
- matlab随机抽样模拟,随机抽样一致性算法（matlab）
- 网页的406报错问题
- dede自动采集自动伪原创完美版插件 元旦优惠活动
- 华为模拟器配置S5700交换机OSPF案例
- JQuery UI combogrid
- 群论基础速成（6）：五大著名群族
- python等额本息和等额本金_用Python解读房贷利率，要不要看随你
- 如何使用git 生成密钥？
- 操作 Windows7 任务栏的快捷方式
- 斯坦福cs231n作业数据集下载
- STC89C52小车PWM控制直流电机详细代码
- 十六种顶级的思维模型
- 【VBA研究】如何防止用户关闭窗体
热门文章
- linux cad转pdf文件怎么打开,PDF猫CAD转PDF官方版
- Android Q Default Ringtone 客制化SKUID默认来电铃声/通知铃声配置
- 路由器装mentohust插件破解锐捷认证(Pandorabox固件）
- 课程设计---宾馆客房管理系统
- 由WPS 2005想到的
- Python机器学习：适合入门的8个项目
- python发送以太网报文_python之分解以太帧
- android连接打印机打印pdf文件,在android中打印pdf
- informatica学习1-数据仓库,ETL,数据仓库工具Informatica介绍
- Firefox配置更改导致B站视频加载失败（MEDIA SEGMENT下载错误）的某种情况