Ikon

Komponent: FIcon
Status: Produktionsklar

Innehåll

Innan användning
Informationsbärande ikon
Stackbara ikoner
Användning av annat ikon-bibliotek
Spegling och rotation av ikoner
API

Innan användning

För att använda ikoner måste du aktivt i din applikation ladda in den spritesheet med ikoner som du vill använda. FKUI-komponenterna är beroende utav att ett ikon-paket är inladdat.

Placera följande i din kod:

import "@fkui/icon-lib-default/dist/f";

Exemplet ovan använder standardpaketet för ikoner från FKUI, @fkui/icon-lib-default. För att använda ett annat ikon-paket, ersätt med namnet på det paketet.

<script lang="ts">
import { defineComponent } from "vue";
import { FIcon } from "@fkui/vue";

export default defineComponent({
    name: "FIconError",
    components: { FIcon },
});
</script>

<template>
    <f-icon name="error"></f-icon>
</template>

Som standard är ikonen gömd för skärmläsare. Om du istället vill skapa en informationsbärande ikon kan du använda slot som i nedan exempel, eller sätta beskrivande text med aria-attribut på komponenten.

<script lang="ts">
import { defineComponent } from "vue";
import { FIcon } from "@fkui/vue";

export default defineComponent({
    name: "FIconInfo",
    components: { FIcon },
});
</script>

<template>
    <f-icon name="pen" tabindex="0">
        <title>Redigera</title>
    </f-icon>
</template>

Stackbara ikoner

<script lang="ts">
import { defineComponent } from "vue";
import { FIcon } from "@fkui/vue";

export default defineComponent({
    name: "FIconStack",
    components: { FIcon },
});
</script>

<template>
    <div class="icon-stack">
        <f-icon name="pdf"></f-icon>
        <f-icon name="success"></f-icon>
    </div>
</template>

Användning av annat ikon-bibliotek

<script lang="ts">
import { defineComponent } from "vue";
import { FIcon } from "@fkui/vue";

export default defineComponent({
    name: "FIconLibrary",
    components: { FIcon },
});
</script>

<template>
    <f-icon name="bell" library="f"></f-icon>
</template>

Spegling och rotation av ikoner

Original:

<script lang="ts">
import { defineComponent } from "vue";
import { FIcon } from "@fkui/vue";

export default defineComponent({
    name: "FIconDefault",
    components: { FIcon },
});
</script>

<template>
    <f-icon name="bell"></f-icon>
</template>

Spegling:

<script lang="ts">
import { defineComponent } from "vue";
import { FIcon } from "@fkui/vue";

export default defineComponent({
    name: "FIconFlip",
    components: { FIcon },
});
</script>

<template>
    <div>
        <f-icon name="pic" flip="horizontal"></f-icon>
        <f-icon name="pic" flip="vertical"></f-icon>
    </div>
</template>

Rotation:

<script lang="ts">
import { defineComponent } from "vue";
import { FIcon } from "@fkui/vue";

export default defineComponent({
    name: "FIconRotate",
    components: { FIcon },
});
</script>

<template>
    <div>
        <f-icon name="pic" rotate="90"></f-icon>
        <f-icon name="pic" rotate="180"></f-icon>
        <f-icon name="pic" rotate="270"></f-icon>
    </div>
</template>

Ikon inuti cirkel: Wrappa ikoner med klassen icon-stack--circle alternativt icon-stack--circle-bottom för att applicera ikon inuti en cirkel.

<script lang="ts">
import { defineComponent } from "vue";
import { FIcon } from "@fkui/vue";

export default defineComponent({
    name: "FIconCircleBackground",
    components: { FIcon },
});
</script>

<template>
    <div>
        <div>
            <div class="icon-stack icon-stack--circle">
                <f-icon name="circle"></f-icon>
                <f-icon name="success"></f-icon>
            </div>
            <div class="icon-stack icon-stack--circle">
                <f-icon name="circle"></f-icon>
                <f-icon name="bell"></f-icon>
            </div>
        </div>
        <div>
            <div class="icon-stack icon-stack--circle-bottom">
                <f-icon name="circle"></f-icon>
                <f-icon name="success"></f-icon>
            </div>
            <div class="icon-stack icon-stack--circle-bottom">
                <f-icon name="circle"></f-icon>
                <f-icon name="bell"></f-icon>
            </div>
        </div>
    </div>
</template>

Alla ikoner

<script lang="ts">
import { defineComponent } from "vue";
import { type IconPackage } from "@fkui/icon-lib-default";
import { FDataTable, FIcon, FTableColumn } from "@fkui/vue";

interface IconEntry {
    id: string;
    namn: string;
    library: string;
}

function importDefault<T extends object>(m: { default: T } | T): T {
    return "default" in m ? m.default : m;
}

async function importIcons(): Promise<IconPackage> {
    return importDefault(await import(process.env.DOCS_ICON_LIB ?? "@fkui/icon-lib-default"));
}

function decamelize(value: string): string {
    return value.replace(/([A-Z])/g, (_, ch: string) => `-${ch.toLowerCase()}`);
}

const iconsPromise = importIcons();

export default defineComponent({
    name: "FIconAll",
    components: { FDataTable, FTableColumn, FIcon },
    data() {
        return {
            allIcons: [] as IconEntry[],
        };
    },
    async mounted() {
        /*
            FKUI supports rendering of an icon package other than `@fkui/icon-lib-default`.
            The icon package must be based on `@fkui/icon-lib-builder`.

            Set env variable `DOCS_ICON_LIB` to desired icon package and make sure that the package is installed during build.
            This is typically done in your CI/CD setup.

            The imported icon package libraries are returned as:
            f
            fSocial
            fFiletypes
            ...
            But needs to be converted to the format of "f", "f-social", "f-filetypes".
        */
        const icons = await iconsPromise;
        this.allIcons = Object.entries(icons).flatMap(([name, entry]) => {
            const library = decamelize(name);
            return entry.metadata.map((icon) => ({
                id: icon.key,
                namn: icon.name,
                library,
            }));
        });
    },
});
</script>

<template>
    <f-data-table :rows="allIcons" :striped="true" key-attribute="id">
        <template #caption>
            <span> Ikoner </span>
        </template>
        <template #default="{ row }">
            <f-table-column title="Ikon" type="text">
                <f-icon :name="row.namn" :library="row.library"></f-icon>
            </f-table-column>
            <f-table-column title="Ikonnamn" type="text">
                {{ row.namn }}
            </f-table-column>
            <f-table-column title="Ikon-bibliotek" type="text">
                {{ row.library }}
            </f-table-column>
        </template>
    </f-data-table>
</template>