uni-app 使用 iconfont 圖標 自定義圖標

 

uni-app 的uni-ui 的 Icon 圖標組件，裡面的圖標只是移動端常見的圖標，對於一些其餘需求所要顯示的圖標，這個是徹底不夠用。那麼怎麼辦?模仿它的組件，用阿里巴巴圖標矢量庫的圖標，本身定義一個圖標組件呀。

1、uni-app 圖標組件

一、組件文件m-icon裏面有兩個文件，一個是m-icon.css文件一個是m-icon.vue文件

二、m-icon.css

三、m-icon.vue

四、使用

上面就是uni-app 官網的例子。接下來咱們就參考這個本身寫一個組件。

2、新建組件

一、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>

這裏其實能夠看出，其實就是和官網的同樣，只是換了一下名字。

接下來就是把阿里巴巴圖標加進來

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

四、還差一步，就是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";
}

 就能夠正常使用啦

五、若是後續還有要加入其它的圖標呢？

重複上面一、2兩步

而後點擊更新  Unicode ，將更新後的.ttf的那個url 更新到uni-icon.css 中

最後點擊圖標 編輯

 

在uni-icon.css 中加入 

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

就能夠啦 。不須要從新下載解壓