Azir Framwork list : https://azir.io/docs

Icon

A great component that give you the ability you to create your own custom icons .

> We give you a tool to generate and search for fontawsome icons directly. Icons List

Benefits

- Create you own custome icons which you can control the size of the font icon file.

- No bloatware, one package with one iconset, nothing more nothing less

- Full set of FontAwesome Icons properly updated

- Insanely fast with minimal memory footprint

Installation

to install the latest version of azir-icon you only need to run:

``bash
npm install azir-icon --save
`

or

`bash
yarn add azir-icon
`

Installation process

> Azir Theme using azir-font as a default font icons for all azir components Icons like (Spinner,Radio, Switch, CheckBox, RadioGroup, CheckboxGroup ), its required to load at least azir font into your app

`jsx
async function loadResourcesAsync() {
await Promise.all([
Font.loadAsync({
"azir-font": require("./assets/fonts/azir-font.ttf")
})
]);
}
`

Font Awesome Icons provide also three types of free icons set . you can download which type you want or even you can download them all if you want ;) in addtion You can create your own custom font..

Create Custom Font Icons

> you can use one of the online font icons generator like Fontello which we are using in our custom font example.

| Type | Font Name(Required) | Download | Size |
| ------------------------ | ------------------- | -------------------------------------------------------------- | ------ |
| AzirIcons (REQUIRED) | azir-font | azir-font | 14 KB |
| RegularIcons | fa-regular-400 | fa-regular-400 | 34 KB |
| SolidIcons | fa-solid-900 | fa-solid-900 | 188 KB |
| BrandIcons | fa-brands-400 | fa-brands-400 | 127KB |
| Custom Font | custom-font-icon | custom-font-icon | 10 KB |

> next step is to load these fonts into your app , check below example if you are using expo .

`jsx
async function loadResourcesAsync() {
await Promise.all([
Font.loadAsync({
"azir-font": require("./assets/fonts/azir-font.ttf"),
"fa-solid-900": require("./assets/fonts/fa-solid-900.ttf"),
"fa-regular-400": require("./assets/fonts/fa-solid-900.ttf"),
"fa-brands-400": require("./assets/fonts/fa-brands-400.ttf"),
"custom-font-icon": require("./assets/fonts/custom-font-icon.ttf") // if you want to use Custom font. you can change the name of the font and the file as you want ( only for custom font icon)
})
]);
}
`

> if you want to use your custom font icons, you need to do one extra step to map your fonts icons and inject them to our Dictionary . which is an easy step .

- Create new javascript file ( for example CustomIcons.js)

- Export your icons object and make sure that you include in the first element : \_fontFamily: "custom-font-icon" the same name as you used in Font.loadAsync.

- dont forget to add \u before each icon code. also icons name should be camel case.

`jsx
export default CustomIcons = {
_fontFamily: "custom-font-icon",
unHappy: "\uE802",
wink: "\uE813",
fireStation: "\uE817",
rss: "\uE800",
githubCircled: "\uE801",
sound: "\uE804",
jabber: "\uF317"
};
`

$3

Examples

#### Font Awesome Icons :

`jsx
import Icon, { SolidIcons, RegularIcons, BrandIcons } from "azir-icon";
---
padding: 15, textShadowColor: "#ff0000",
textShadowOffset: { width: -1, height: -1 },
textShadowRadius: 2
} } />


`

#### Custom Font icons :

`jsx
import Icon from "azir-icon";
import CustomIcons from "./CustomIcons";//check above code of this object
---




`

$3

- icon
- color
- size
- shadow
- style`

---

Reference

$3

set the Icon using one of the fontawsome free icons set.

| Type | Required | Default |
| -------------------------------------------------- | -------- | ---------------- |
| SolidIcons, RegularIcons, BrandIcons , CustomIcons | YES | SolidIcons.smile |

$3

color of the Icon

| Type | Required | Default |
| ------------------------------------------ | -------- | ------- |
| azir-color | No | theme |

$3

set the size of the icon , you can instead of using the size prop, you just override the style prop.

| Type | Required | Default |
| ------ | -------- | ------------------------- |
| Number | No | AzirTheme.SIZES.ICON_SIZE |

$3

If true, show shadow effect for this component.

| Type | Required | Default |
| ---- | -------- | ------- |
| bool | No | false |

$3

override Icon style,since we are using text to render icon then you can use all react native text props

| Type | Required |
| ----- | -------- |
| style | No |