AisIcon encapsulates our use of the FontAwesome icon library (v6). Any FontAwesome (free) icon can be imported and loaded. Additionally, a core set of icons are available through semantic keys, e.g. edit.
AisIcon loads a set of core icons by default and exposes them through semantic keys. They can be rendered by passing the appropriate key to the icon prop. The keys are listed below.
arrow
asterisk
busy
new
edit
confirm
cancel
save
copy
delete
close
undo
redo
search
filter
info
success
required
error
warning
danger
unknown
person
user
users
group
menu
options
calendar
clock
money
heart
star
locked
unlocked
upload
download
left
right
up
down
first
last
caret-left
caret-right
caret-up
caret-down
file
file-pdf
file-csv
file-excel
file-word
file-powerpoint
file-image
file-video
file-upload
default
primary
secondary
bold
italic
strikethrough
list
list-ol
subscript
superscript
<template><divclass="grid gap-8 grid-cols-4 text-center"><Examplev-for="key in coreIconKeys":label="key":key="key"><AisIcon:icon="key"class="text-4xl mb-2"/></Example></div></template><scriptsetup>import AisIcon from'@/components/icon/AisIcon.vue'import Example from'@/components/docs/ComponentExample.vue'import{ coreIconKeys }from"@/components/icon/ais-icons";</script>
Components and client applications may load any FontAwesome icon by importing the icon definition directly from one of the FontAwesome icon packs. Client applications must also declare the necessary icon packs as dependencies.
Accessible
<template><divclass="grid gap-y-8"><Examplelabel="Accessible"><AisIcon:icon="faAccessibleIcon"class="text-5xl mb-2"/></Example></div></template><scriptsetup>import AisIcon from'@/components/icon/AisIcon.vue'import Example from'@/components/docs/ComponentExample.vue'import{ library }from'@fortawesome/fontawesome-svg-core'// Import icons from the FontAwesome icon packsimport{ faAccessibleIcon }from'@fortawesome/free-brands-svg-icons'// Add one or more icons to a library
library.add(faAccessibleIcon)</script>
When AisIcon does not recognize an icon it will show a question mark. If you see this unexpectedly, something is wrong with your icon specification. AisIcon will also emit a warning in the console.
Unknown
<template><divclass="grid gap-y-8"><Examplelabel="Unknown"><AisIconicon="badKey"class="text-5xl mb-2"/></Example></div></template><scriptsetup>import AisIcon from'@/components/icon/AisIcon.vue'import Example from'@/components/docs/ComponentExample.vue'</script>