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.
Visa kod
<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.
Visa kod
<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 >
Visa kod
<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 >
Visa kod
<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 >
Original:
Visa kod
<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:
Visa kod
<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:
Visa kod
<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 innuti cirkel:
Wrappa ikoner med klassen icon-stack--circle
alternativt icon-stack--circle-bottom
för att applicera ikon innuti en cirkel.
Visa kod
<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 >
Visa kod
<script lang ="ts" >
import { defineComponent } from "vue" ;
import { type IconPackage } from "@fkui/icon-lib-default" ;
import { FDataTable , FTableColumn , FIcon } 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 ( ) {
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 >
name : string
Icon name.
library : string
Optional
fk-icon library
Default: "f"
flip : string
Optional
Flip icon horizontally or vertically.
Must be set to one of:
Default: null
rotate : string
Optional
Rotate icon.
Must be set to one of:
Default: null
default
‐