微信小程序——引入第三方图标、图标组件

这里以Iconfont 为例 iconfont-阿里巴巴矢量图标库

一、直接引用

创建一个图标项目，名字自定义，我的是fontIcon，

注意项目的前缀和font family两处自己定义的名字，后面会用到；

选中Unicod,选择下载至本地，里面包含很多文件，找到iconfont.css,把里面的内容复制到全局里 app.wxss，如果不想放到app.wxss里，可以直接放在自己的目录下，比如放在css文件下，可以直接把iconfont.css文件后缀.css改成.wxss,然后在app.wxss里引用

@import "/css/iconfont.wxss";

页面里直接用样式名字就可以，例如，iconfot 就是在图标项目里定义的名字 myIcongerenzhongxin1就是对应图标的名字

<view class="iconfont myIcongerenzhongxin1"></view>

页面展示效果

二、把图标设置成组件

新建组件文件夹 icon,右键新建组件，起名icon（可以随便起）

icon.wxml文件

<!--pages/icon/icon.wxml-->
<view class="custom-class iconfont {{ name }}" style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size : '' }}" ><view wx:if="{{ info !== null }}" class="myIcon__info">{{ info }}</view>
</view>

icon.js文件

// pages/icon/icon.js
Component({// options: {//     addGlobalClass: true// },// externalClasses: ['custom-class'],/*** 组件的属性列表*/properties: {info: null,name: String,size: String,color: String},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})

icon.json文件

{"component": true,"usingComponents": {}
}

icon.wxss文件，具体样式可以自己改

.myIcon__info {color:#fff;left:2.5em;top:0;font-size: 0.5em;padding: 0 0.3em;text-align: center;min-width: 1.2em;line-height: 1.2;position: absolute;border-radius: 0.6em;box-sizing: border-box;background-color: #f44;
-webkit-transform: translateX(-50%);transform: translateX(-50%);font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;}

app.json中配置icon组件

{"pages": ["pages/index/index",],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json","usingComponents": {"navtab": "pages/nav/navigation","myIcon": "pages/icon/icon"}
}

引用的页面

<myIcon style="width:60rpx;height:200rpx;margin-top:100rpx;" name="myIconIMliaotian" color="#000" size='1.5rem' info='+99'></myIcon>

运行效果

参数说明

参数	说明	类型	默认值
name	图标名称	String	-
info	图标右上角文字提示	String \| Number	-
color	图标颜色	String	inherit
size	图标大小，如 16px，1em	String	inherit
custom-style	自定义样式	String	-

微信小程序——引入第三方图标、图标组件相关推荐

微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
微信小程序引入阿里巴巴彩色图标字体（Symbol）
步骤一:在微信小程序开发者工具的工作的根目录打开cmd,输入 npm install mini-program-iconfont-cli --save-dev 步骤二:输入命令,生成iconfont. ...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...
微信小程序 - 引入第三方字体（使用网络字体）
前言因项目需求,需要一套第三方字体,如下图所示效果(YC MEMBERSHIP SEASON CARD 和数字0): 实现 1.引入一套第三方字体(如上图所示的第三方字体). 2.在 App.vu ...
uniapp微信小程序引入第三方广告插件
以Slime广告插件为例. 一.微信小程序后台申请相关插件二.manifest.json文件 "mp-weixin" : {"appid" : "* ...
微信小程序引入iconfont单色图标实例
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Unicode方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Font class方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中 4. 在小程序项 ...
微信小程序引入自定义字体图标
本文只引入iconfont图标在iconfont内获取到图标后下载到本地后将 iconfont.ttf文件进行base64转码地址:https://www.giftofspeed.com ...
微信小程序引入iconfont彩色图标
小程序引用iconfont前两种不支持彩色,必须使用symbol,使用方法如下: 引用方法名支持多色兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序 ...

微信小程序——引入第三方图标、图标组件

一、直接引用

二、把图标设置成组件

微信小程序——引入第三方图标、图标组件相关推荐

最新文章

热门文章