@fluid-topics/ft-icon/build/ft-icon.styles.js

Typography components

import { css } from "lit";
import { FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
export const FtIconCssVariables = {
    size: FtCssVariableFactory.create("--ft-icon-font-size", "", "SIZE", "24px"),
    fluidTopicsFontFamily: FtCssVariableFactory.extend("--ft-icon-fluid-topics-font-family", "", FtCssVariableFactory.create("--ft-icon-font-family", "", "UNKNOWN", "ft-icons")),
    fileFormatFontFamily: FtCssVariableFactory.extend("--ft-icon-file-format-font-family", "", FtCssVariableFactory.create("--ft-icon-font-family", "", "UNKNOWN", "ft-mime")),
    materialFontFamily: FtCssVariableFactory.extend("--ft-icon-material-font-family", "", FtCssVariableFactory.create("--ft-icon-font-family", "", "UNKNOWN", "Material Icons")),
    verticalAlign: FtCssVariableFactory.create("--ft-icon-vertical-align", "", "UNKNOWN", "unset"),
};
//language=css
export const styles = css `
    :host, i.ft-icon {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        flex-grow: 0;
    }

    :host {
        width: ${FtIconCssVariables.size};
        height: ${FtIconCssVariables.size};
    }

    i.ft-icon {
        width: 100%;
        height: 100%;
        font-size: ${FtIconCssVariables.size};
        line-height: 1;
        font-weight: normal;
        text-transform: none;
        font-style: normal;
        font-variant: normal;
        speak: none;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        vertical-align: ${FtIconCssVariables.verticalAlign};
    }

    i.ft-icon.ft-icon--fluid-topics {
        font-family: ${FtIconCssVariables.fluidTopicsFontFamily}, ft-icons, fticons, sans-serif;

        /* Ugly fix because font is broken */
        font-size: calc(0.75 * ${FtIconCssVariables.size});
        line-height: ${FtIconCssVariables.size};
        position: relative;
        top: -4%;
        justify-content: center;
    }

    .ft-icon--file-format {
        font-family: ${FtIconCssVariables.fileFormatFontFamily}, ft-mime, sans-serif;
    }

    .ft-icon--material {
        font-family: ${FtIconCssVariables.materialFontFamily}, "Material Icons", sans-serif;
    }
`;