Using icons

Icons are an integral part of any modern web application. They are used to represent actions, objects, and more.

To make it easier to use icons in your Safḥa application, Safḥa includes @kalimahapps/vue-icons package which has nearly 70 thousand icons. The icons are imported using a custom vite resolver. Which means that you don't need to import them if they are used inside <template> tags.

For example:

<template>
  <div>
	<BsAirplaneEngines />
  </div>
</template>

However when used inside script tags, you need to import them like this:

<script setup>
import { BsAirplaneEngines } from '@kalimahapps/vue-icons'

// use BsAirplaneEngines here
</script>

Knowing the name of the icon

vue-icons packages create the name of the icon in the following format. The first two letters represent the icon set (e.g. Bs for Bootstrap icons), and the rest of the name is the icon name. The name of the icon is in PascalCase.

If you view the Vue Icons website and click on any icon, you will get a box at the bottom of the page showing a code similar to this:

import { BsAlphabet } from "@kalimahapps/vue-icons";

You can copy only the icon name (e.g. BsAlphabet) to include in yout <template></template> section, or you can copy the whole line and include it in your <script setup></script> section.

Icons Demo

You can see a list of all the icons in Vue Icons website.