直接上代码
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;
}
}
具体代码参考