uniapp自定義圖標組件

uniapp擴展圖標組件在dcloud官網上可以看到插件示例，https://ext.dcloud.net.cn/plugin?id=1134

這里贅述下，只是記錄下自己的學習

 

官網示例如下：

my-icon組件的代碼如下

<template>
    <view :class="[prefixClass, prefixClass+'-'+type]" :style="{ color: color, 'font-size': size + 'px' }" @click="_onClick" />
</template>

<script>
    export default {
        name: 'myIcon',
        props: {
            /**
             * 自定義字體圖標庫前綴
             */
            prefixClass: {
                type: String,
                default: 'uni-icon'
            },
            type: {
                type: String,
                default: ''
            },
            color: {
                type: String,
                default: '#333333'
            },
            size: {
                type: [Number, String],
                default: 16
            }
        },
        methods: {
            _onClick() {
                this.$emit('click')
            }
        }
    }
</script>

<style>
    @font-face {
        font-family: myicons;
        font-weight: normal;
        font-style: normal;
        src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARYAAsAAAAACXgAAAQMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDGgqGHIUfATYCJAMUCwwABCAFhG0HWhslCFGULkqG7MdibKuBrWRkUYQsarvtRKu1XvwQwfdr6L4PFwSHJOOBJcH4qCgDJGSUS2psx7Ns/W2/16VrC5vz7XZVa6oWsH/m/bHzwjqP0yiFkCAcf9V9vtFyuldiAC6EU+L+iWcWxD0QR6HqLvzP/XxdHh9YXpsNZE9t1e3RQDujB7gzsE6PD/RBf3sL+h/GbiIO4zyBbpOGSnuH2xM0FWBaIO4Dz4JmTKeUkEKnsslZW8Q7Tmd6SHeAN/f54695GJDUDMw9vtu7sPqx8TGGIS2BdIrB788CaRMZ60AhbnNt5yp+bF1Ft2GrWi4fXgQ/Yv63AD8iKW+2//AISVaIBpD1ssQtadknPmYQ/IhikPgRbZHtKJ8V3AxZpZO7MQL8A4hDnjg/pyoaZdjAaKwt78gDDUbksRtyiOPzBCU+6aSxqibpgpNk2a5PSu17ECl4J3VnD6pJohyXryhVSXM331OWStrmbnnL5jlJd+Ul6rOkHiVbkjYTu0295302Tew0FaaAJdPGiOI5E5YXLCv9ORJnKU43k6/rmRDGuqB7WpzNJd3j4mQv1TMjTFXkobJMKNy6yUTqZIyyqzdv1ppzwkVpY2fIWfG87tzOrWhIqlxKJk2sCu5IRjOP8IwsF06TTSVb8m6oKP+zwtNchczMHaGLqJQUalHoZH7+4oR1VRCtfVloarCFWPvt2dPyyiqqHcHVtENDRZ+k43dq6p3sbPdav9dnTf7w7EKT5ENrFqX1BXpdLrbJ78mc+TC9FWIZAGyG5+N1rvMBLgDgI4ODL9o7LHI+mjEPHSu3Lz+GmGnf6bkWEYRzDxg8nz2fdNJyQUJfmN84KCBeI87F7q0aioiG14bw9UdUNWxVYMXtm0z3FakD78FHMFq1O3jJCKNpPy9lZjagCxeqTM8awf75w55l2JRDRKEdtgEj81f6D9B+YT4yuKRveVp9gYGKrU9qnIunzbYxSPzaNL6tqO8eL0/znvYCq14+6JSozf+A+DWbiikE+lr0UszT/dWRTyWS0A1dtKxr2F8/irHaEUJnjC9B0mECsk7z2EJch6rHBjQ6bUK3NcfNPUawiihdWPXFQBj0DUm/T8gG/WAL8Reqcf/QGAwGul2GxZ49FqOkvYjJEnLR/sTAyVKFjNL2iu/kvcYWR4Uu+YVYB0GcBYcmk0dKiftYoN+8uYhCxVmCB+YyiuMMc85CcmTsi+TLSUhh3gONnSyBtl2MWARxIdsnFHBkUop2F+3U098Rz6uYhUvKGswvCNOC/tHM2LQG9ihLa5Wdy2DtjWdOCMVPUlgmgQ6shcQwlkF5/qgQcYgxv0UktzTh2qm6svH4iuQa8//kimB4jRQ5StRodO28fySkT4vnN81Elrl1AQA=') format('woff2');
    }
    .uni-icon-wrapper {
        line-height: 1;
    }
    .uni-icon {
        font-family: uniicons;
        font-weight: normal;
        font-style: normal;
        line-height: 1;
        display: inline-block;
        text-decoration: none;
        -webkit-font-smoothing: antialiased;
    }

    .my-icon {
        font-family: myicons;
        font-weight: normal;
        font-style: normal;
        line-height: 1;
        display: inline-block;
        text-decoration: none;
        -webkit-font-smoothing: antialiased;
    }
    
    .my-icon-test:before {
      content: "\e634";
    }
    
    .uni-icon.uni-active {
        color: #007aff;
    }

</style>

使用組件：

<template>
    <view>
        <my-icon prefixClass="my-icon" type="test" size="25"></my-icon>
    </view>
</template>

<script>
    import myIcon from "../../components/my-icon/my-icon.vue";
    export default {
    }
</script>

<style></style>

效果圖：