uni-app 使用 iconfont 图标自定义图标

圆卜卜 發表於 2019-8-14 19:09:00

uni-app 使用 iconfont 图标自定义图标

uni-app 的uni-ui 的 Icon 图标组件，裡面的图标只是移动端常见的图标，对于一些其他需求所要显示的图标，这个是完全不够用。那么怎么办?模仿它的组件，用阿里巴巴图标矢量库的图标，自己定义一个图标组件呀。
一、uni-app 图标组件
1、组件文件m-icon里面有两个文件，一个是m-icon.css文件一个是m-icon.vue文件
<img src="https://img2018.cnblogs.com/blog/1202901/201908/1202901-20190814184730486-1352034806.png">
2、m-icon.css
<img src="https://img2018.cnblogs.com/blog/1202901/201908/1202901-20190814185231929-1481022024.png">
3、m-icon.vue
<img src="https://img2018.cnblogs.com/blog/1202901/201908/1202901-20190814185415002-249885726.png">
4、使用
<img src="https://img2018.cnblogs.com/blog/1202901/201908/1202901-20190814185651094-1010324991.png">
上面就是uni-app 官网的例子。接下来我们就参考这个自己写一个组件。
二、新建组件
1、uni-icon ，里面有uni-icon.css 和uni-icon.vue 两个文件
uni-icon.css
<div class="cnblogs_code">
<pre>@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
/* 暂时先用官网的url */
src:url('https://at.alicdn.com/t/font_1328537_gk9yl0aa13q.ttf') format('truetype');
}

.icon {
font-family: uniicons;
font-size: 48upx;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}

.icon.uni-active {
color: #007aff;
}</pre>
</div>
uni-icon.vue
<pre>:class="['icon-'+type]"对应uni-icon.css 里面的 .icon-scan:before { 　　content: "\e638"; } </pre>
<div class="cnblogs_code">
<pre><template>
<view class="icon" :class="['icon-'+type]" :style="{color:color,'font-size':fontSize,'background':background}" @click="onClick()"></view>
</template>

<script>
export default {
 props: {
 /**
 * 图标类型
 */
 type: String,
 /**
 * 图标颜色
 */
 color: String,
 /**
 * 图标背景颜色
 */
 background: String,
 /**
 * 图标大小
 */
 size: {
 type: ,
 default: 24
 }
 },
 computed: {
 fontSize() {
 var size = Number(this.size)
 size = isNaN(size) ? 24 : size
 return `${size}px`
 }
 },
 methods: {
 onClick() {
 this.$emit('click')
 }
 }
}
</script>

<style>
@import "./u-icon.css";
</style></pre>
</div>
这里其实可以看出，其实就是和官网的一样，只是换了一下名字。
接下来就是把阿里巴巴图标加进来
三、阿里巴巴图标矢量库
1、注册一个阿里巴巴图标矢量库账号
2、选择自己想要的图标，加入购物车；然后把购物车里面的图标添加至你的项目里面。
<img src="https://img2018.cnblogs.com/blog/1202901/201908/1202901-20190814190600934-951885213.png">
<img src="https://img2018.cnblogs.com/blog/1202901/201908/1202901-20190814190840846-1167974409.png">
3、在我的项目中，下载文件，然后解压，找到iconfont.css文件夹，将里面的【***：before】全部复制到你现有的工程项目里。
 我们先看看iconfont.css是怎样的
<img src="https://img2018.cnblogs.com/blog/1202901/201908/1202901-20190814193047558-959572933.png">
uni-icon.css
<img src="https://img2018.cnblogs.com/blog/1202901/201908/1202901-20190814193513670-1153958209.png">
这里有一个要注意的点
iconfont.css 里面的 
.icon-scan:before { 　　content: "\e638"; }
刚好是.icon前缀和我定义的uni-icon.css 里面的.icon 前缀名字相同，所以直接复制粘贴就可以了。如果我定义的是.uni-icon前缀的话，那么这个时候uni-icon.css 复制进来的
.icon-scan:before { 　　content: "\e638"; } 
就要改成
.uni-icon-scan:before { 　　content: "\e638"; }
4、还差一步，就是src的url
<img src="https://img2018.cnblogs.com/blog/1202901/201908/1202901-20190814194501420-304555162.png">
将Unicode只要复制.ttf的那个url 添加到uni-app 项目中添加https
uni-icon.css 最终版
<div class="cnblogs_code">
<pre>@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src:url('https://at.alicdn.com/t/font_1302625_v83rvydxjyo.ttf') format('truetype'); //更新这里
}

.icon {
font-family: uniicons;
font-size: 48upx;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}

.icon.uni-active {
color: #007aff;
}
/* 加进来的图标 */
.icon-scan:before {
content: "\e638";
}</pre>
</div>
 就可以正常使用啦
5、如果后续还有要加入其它的图标呢？
重复上面1、2两步
然后点击更新  Unicode ，将更新后的.ttf的那个url 更新到uni-icon.css 中
最后点击图标编辑
<img src="https://img2018.cnblogs.com/blog/1202901/201908/1202901-20190814195311665-1909132931.png">
 
在uni-icon.css 中加入 
.icon-people_fill:before { content: "\e601"; }
就可以啦。不需要重新下载解压
  
来源：https://www.cnblogs.com/qiu-Ann/p/11354095.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 使用 iconfont 图标 自定义图标

uni-app 使用 iconfont 图标自定义图标