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 > 
 
             
        
                
                
                
            
                 
         
                
                    <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 > 
 
             
        
                
                
                
            
                 
         
                
                    <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:
            
                
                
                
            
                 
         
                
                    <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 > 
 
             
        
                
                
                
            
                 
         
                
                    <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 (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 : stringOptional 
                            
                         
                        
                            fk-icon library
                            Default: "f"
                            
                         
                    
                        
                            flip : stringOptional 
                            
                         
                        
                            Flip icon horizontally or vertically.
Must be set to one of:
                            Default: null
                            
                         
                    
                        
                            rotate : stringOptional 
                            
                         
                        
                            Rotate icon.
Must be set to one of:
                            Default: null
                            
                         
                    
         
    
        
            
         
        
            
                        
                            default  
                        
                            ‐