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 中

最后點擊圖標 編輯

 

在uni-icon.css 中加入 

.icon-people_fill:before {
content: "\e601";
}

就可以啦 。不需要重新下載解壓