Revision history [back]

IconButton, how to use own icons with highlight

IconButton supports stock theme-icons with highlight feature, but unfortunately not your own icons.

For this purpose you need to implement your own QQuickImageProvider, which mimics operation of theme -imageprovider from Sailfish Silica.

Assumes your own icons are stored in /usr/share/harbour-appname/qml/icons/

e.g. IconProvider.h

 #ifndef ICONPROVIDER_H
#define ICONPROVIDER_H

#include <sailfishapp.h>
#include <QQuickImageProvider>
#include <QPainter>
#include <QColor>

class IconProvider : public QQuickImageProvider
{
public:
    IconProvider() : QQuickImageProvider(QQuickImageProvider::Pixmap)
    {
    }

    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
    {
        QStringList parts = id.split('?');

        QPixmap sourcePixmap(SailfishApp::pathTo("qml/icons/" + parts.at(0) + ".png").toString(QUrl::RemoveScheme));

        if (size)
            *size  = sourcePixmap.size();

        if (parts.length() > 1)
            if (QColor::isValidColor(parts.at(1)))
            {
                QPainter painter(&sourcePixmap);
                painter.setCompositionMode(QPainter::CompositionMode_SourceIn);
                painter.fillRect(sourcePixmap.rect(), parts.at(1));
                painter.end();
            }

        if (requestedSize.width() > 0 && requestedSize.height() > 0)
            return sourcePixmap.scaled(requestedSize.width(), requestedSize.height(), Qt::IgnoreAspectRatio);
        else
            return sourcePixmap;
    }
};

#endif // ICONPROVIDER_H

And then in main.cpp after createView()

 #include "IconProvider.h"
....
QQmlEngine *engine = view->engine();
engine->addImageProvider(QLatin1String("myIcons"), new IconProvider);

This can then be used in QML

 IconButton
{
    icon.source: "image://myIcons/icon-toss"
    anchors.bottom: parent.bottom
    highlighted: tossMode

    onClicked: tossMode = true
}