¿Hay algún ícono estándar para qml-app-development?

11

Estoy desarrollando una aplicación qml y quiero poner iconos en los botones. Me gustaría usar íconos estándar de ubuntu para obtener el aspecto real de ubuntu para mi aplicación. ¿Cómo puedo hacer esto?

application-development ubuntu-touch Oliver Heidbüchel
fuente
¿Quieres usar iconos de otra persona? ¡Cuidado con los derechos de autor! Un ícono es un trabajo creativo. Tiene derechos de autor. Por lo tanto, primero debe verificar la licencia de copyright que viene con ese ícono. Tenía esta página web en mis marcadores. Se trata de Canonical, el negocio detrás de Ubuntu, contratar al tipo 'Faenza' para crear nuevos iconos.
iloveubuntu.net/…
Daniel Holm
Seguramente, la API debe proporcionar una forma de obtener un ícono del tema de todo el sistema. ¿Por qué se cerró esto?
andrewsomething

Respuestas:

8

El tema oficial del icono de Ubuntu Touch se llama Ubuntu Mobile, y está disponible para su instalación en el ubuntu-mobile-iconspaquete. Aquí hay una muestra de los íconos provistos:

Iconos de acción móvil de Ubuntu

Para usar los íconos en su código, simplemente use la ruta al ícono. Por ejemplo, para configurar el icono en un botón de la barra de herramientas, haga algo similar a esto:

ToolbarButton {
    text: i18n.tr("Refresh")
    iconSource: Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/reload.svg")
}

Para evitar tener que repetir la ruta raíz una y otra vez, generalmente uso una pequeña función llamada getIconque devuelve la ruta real a un icono:

function getIcon(name) {
    return Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/" + name + ".svg")
}

El ejemplo anterior sería entonces:

ToolbarButton {
    text: i18n.tr("Refresh")
    iconSource: getIcon("reload")
}
Yo creo
fuente
3
Esta respuesta necesita ser actualizada. La forma correcta y oficial de usar iconos es, iconName: "reload" o iconSource: "image: // theme / reload"
nik90
4

Acabo de comenzar a incursionar en QML, pero parece que Ubuntu SDK proporciona una forma de acceder a los iconos del tema, el componente Icon. Aquí hay un ejemplo de Hello Worldish:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: root
    objectName: "mainView"

    width: units.gu(50)
    height: units.gu(75)

    property real margins: units.gu(2)
    property real buttonWidth: units.gu(9)

    Page {
        title: i18n.tr("Icons!")

    Column {

        anchors {
            fill: parent
            margins: root.margins
        }
        spacing: units.gu(1)

        Icon {
            name: "call-start"
            width: 48
            height: 48
         }

        Icon {
            name: "call-stop"
            width: 48
            height: 48
         }

        Icon {
            name: "find"
            width: 48
            height: 48
        }

        }
    }
}

Esto te da:

qml-icons-hello-world

AFAICT, esto en realidad no parece admitir el conjunto completo de iconos proporcionados por la especificación de tema de iconos de Freedesktop, aunque .....

andrewsomething
fuente
0

El tema predeterminado para Ubuntu mobile es Suru y los íconos se encuentran en /usr/share/icons/suru

Cualquiera de los íconos se puede usar por nombre. Incluso iconos fuera del conjunto de iconos de Suru.

Si el archivo es /usr/share/icons/suru/actions/scalable/like.svg

El código podría ser:

Action {
    id: likeAction
    iconName: "like"    // the files name without file ending
    text: "I like this"
}

Lo que te da un botón de acción con un ícono de corazón.

Grasa de caballo
fuente