# StatusIcon
The StatusIcon component is used to add an icon that represents one of the following statuses:
- success
- info
- warning
- danger
To use this component:
1. Import it into the single file component (SFC)
2. Add the `` tag
3. Add the optional status prop and set the value to one of the statuses
4. Add the translated text to associate with the icon
```vue
import StatusIcon from '@/components/Global/StatusIcon'
```
## Status icon with default status
```vue
```
![StatusIcon default icon example](./secondary.png)
## Status icon with success status
```vue
```
![StatusIcon success icon example](./success.png)
## Status icon with info status
```vue
```
![StatusIcon info icon example](./info.png)
## Status icon with warning status
```vue
```
![StatusIcon warning icon example](./warning.png)
## Status icon with danger status
```vue
```
![StatusIcon danger icon example](./danger.png)
### Example of AppHeader with status icon
![AppHeader with status icon example](./appHeaderWithStatusIcon.png)
### Example of Event logs with status icon
![EventLogs with status icon example](./eventLogsWithSatusIcon.png)