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

uni-app 的uni-ui 的 Icon 图标组件，裡面的图标只是移动端常见的图标，对于一些其他需求所要显示的图标，这个是完全不够用。那么怎么办?模仿它的组件，用阿里巴巴图标矢量库的图标，自己定义一个图标组件呀。

一、uni-app 图标组件

1、组件文件m-icon里面有两个文件，一个是m-icon.css文件一个是m-icon.vue文件

2、m-icon.css

3、m-icon.vue

4、使用

上面就是uni-app 官网的例子。接下来我们就参考这个自己写一个组件。

二、新建组件

1、uni-icon ，里面有uni-icon.css 和uni-icon.vue 两个文件

uni-icon.css

@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;
}

uni-icon.vue

:class="['icon-'+type]"  对应uni-icon.css 里面的 .icon-scan:before {
　　content: "\e638";
}

<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: [Number, String],
                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>

这里其实可以看出，其实就是和官网的一样，只是换了一下名字。

接下来就是把阿里巴巴图标加进来

三、阿里巴巴图标矢量库

1、注册一个阿里巴巴图标矢量库账号

2、选择自己想要的图标，加入购物车；然后把购物车里面的图标添加至你的项目里面。

3、在我的项目中，下载文件，然后解压，找到iconfont.css文件夹，将里面的【***：before】全部复制到你现有的工程项目里。

我们先看看iconfont.css是怎样的

uni-icon.css

这里有一个要注意的点

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

将Unicode只要复制.ttf的那个url 添加到uni-app 项目中添加https

uni-icon.css 最终版

@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";
}

就可以正常使用啦

5、如果后续还有要加入其它的图标呢？

重复上面1、2两步

然后点击更新 Unicode ，将更新后的.ttf的那个url 更新到uni-icon.css 中

最后点击图标编辑