QML 封装使用SVG 和Iconfont

直接上代码

1、使用SVG图

import QtQuick 2.6

/* https://www.iconfont.cn
    svg 是一种比较流行的icon 源。
    默认是异步加载的,可提高性能。
    因为需要寻找svg资源，这点没有AwesomeIcon 方便。
*/
/*! TODO */
Item {
    id:toou2d_svgicon
    width:  16; height: 16;

    property bool   asynchronous : true;

    property bool   smooth: true;

    property color  color;

    property string source;

    property alias status: image.status;

    Image {
        id:image
        asynchronous: toou2d_svgicon.asynchronous;
        anchors.fill: toou2d_svgicon;
        source:  toou2d_svgicon.source;
        smooth: toou2d_svgicon.smooth
        visible: false;
        enabled: false;
    }

    ShaderEffect {
        id: shaderItem
        property variant source: image
        property color   color: toou2d_svgicon.color
        enabled: false;
        fragmentShader: "qrc:/font/svg.cso"
        anchors.fill: parent;
        visible: toou2d_svgicon.status === Image.Ready;
    }
}

2、使用Iconfont

import QtQuick 2.6

/*!
    \qmltype TAwesomeIcon
    \inqmlmodule QtQuick 2.6
    \brief Font Icon
    \since 5.9.x
    \ingroup qtquicktest

    has been supported to the latest version

    \code
    TAwesomeIcon{
        source:T2D.FA_apple
    }
    \endcode

    Theme ini file is configured to 'FA_apple'.
*/
Item {
    id:toou2d_awesomeicon
    width:  16;
    height: 16;

    property color  color;

    /*! \sa TAwesomeType */
    property alias source : content_text.text;

    Text {
        id:content_text
        anchors.fill: parent;
        enabled:          false;
        color:            toou2d_awesomeicon.color;
        font.family:      "fontawesome"
        font.pixelSize:   Math.max(toou2d_awesomeicon.width,toou2d_awesomeicon.height);
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment:   Text.AlignVCenter; 
    }

}

具体代码参考