Symbol.qml

Go to the documentation of this file.

// SPDX-FileCopyrightText: 2025 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
// SPDX-License-Identifier: MPL-2.0
 
import QtQuick
import Fluid as MD
 
Item {
    id: icon
 
    // Symbols are decorative unless the caller opts in with the native
    // Accessible attached properties.
    Accessible.role: Accessible.Graphic
    Accessible.ignored: Accessible.name.length === 0
 
    enum Style {
        Outlined,
        Rounded,
        Sharp
    }
 
    enum Grade {
        LowEmphasis,
        NormalEmphasis,
        HighEmphasis
    }
 
    enum OpticalSize {
        Small,
        Normal,
        Medium,
        Large
    }
 
    property string name
 
    property int iconWidth: MD.Tokens.symbol.size
 
    property int iconHeight: MD.Tokens.symbol.size
 
    property color color: MD.Style.onBackgroundColor
 
    property int style: Symbol.Style.Outlined
 
    property int weight: Font.Normal
 
    property bool fill: false
 
    property int grade: Symbol.Grade.NormalEmphasis
 
    property int opticalSize: Symbol.OpticalSize.Normal
 
    property alias horizontalAlignment: text.horizontalAlignment
 
    property alias verticalAlignment: text.verticalAlignment
 
    implicitWidth: iconWidth
    implicitHeight: iconHeight
 
    Text {
        id: text
 
        anchors.fill: parent
 
        // Force the OS native layout engine when FILL axis is set to 1 since
        // distance field algorithms struggle with overlapping vector geometry,
        // dynamic geometric modifications, and shifting path outlines that
        // happen when completely solidifying or modifying standard glyphs
        // (like transitioning an outline icon font into a solid shape)
        renderType: icon.fill ? Text.NativeRendering : Text.QtRendering
 
        font.family: {
            switch (icon.style) {
            case Symbol.Style.Rounded:
                return MD.Theme.symbolsRoundedFontFamily;
            case Symbol.Style.Sharp:
                return MD.Theme.symbolsSharpFontFamily;
            case Symbol.Style.Outlined:
            default:
                return MD.Theme.symbolsOutlinedFontFamily;
            }
        }
        font.variableAxes: {
            const gradeValues = [-25, 0, 200];
            const weightValues = [Font.Thin, Font.ExtraLight, Font.Light, Font.Normal, Font.Medium, Font.DemiBold, Font.Bold];
            const opticalSizes = [20, 24, 40, 48];
 
            function closestValue(arr, val) {
                if (val <= arr[0])
                    return arr[0];
                if (val >= arr[arr.length - 1])
                    return arr[arr.length - 1];
                for (let i = 0; i < arr.length; ++i) {
                    if (val <= arr[i])
                        return arr[i];
                }
                return arr[arr.length - 1];
            }
 
            return {
                "FILL": icon.fill ? 1 : 0,
                "GRAD": closestValue(gradeValues, icon.grade),
                "wght": closestValue(weightValues, icon.weight),
                "opsz": closestValue(opticalSizes, icon.opticalSize)
            };
        }
        font.pixelSize: Math.max(icon.iconWidth, icon.iconHeight) / scale
 
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
 
        text: icon.name
        textFormat: Text.PlainText
 
        lineHeight: MD.Tokens.typescale.labelLarge.lineHeight
        lineHeightMode: Text.FixedHeight
 
        // scale: 1.0 / MD.Tokens.calculateCurveScale(Screen.devicePixelRatio)
 
        color: icon.color
        Accessible.ignored: true
    }
}