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.

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<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.

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<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

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<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

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<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:

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<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:

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<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:

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<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.

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<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 setup lang="ts">
import { h, onMounted } from "vue";
import { type IconPackage } from "@fkui/icon-lib-default";
import { FIcon, FTable, defineTableColumns, useDatasetRef } from "@fkui/vue";

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

function importDefault<T extends object>(m: T | { default: 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.replaceAll(/([A-Z])/g, (_, ch: string) => `-${ch.toLowerCase()}`);
}

const iconsPromise = importIcons();
const rows = useDatasetRef<IconEntry>([]);
const columns = defineTableColumns<IconEntry>([
    {
        header: "Ikon",
        render(row) {
            return h("td", { class: "table-ng__cell table-ng__cell--static" }, [
                h(FIcon, { name: row.namn, library: row.library }),
            ]);
        },
    },
    { type: "text", header: "Ikonnamn", key: "namn" },
    { type: "text", header: "Ikon-bibliotek", key: "library" },
]);

onMounted(async () => {
    /*
        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;
    rows.value = 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-table :rows :columns striped>
        <template #caption>
            <span> Ikoner </span>
        </template>
    </f-table>
</template>