Appearance
Icon
This component can be used to use icons from the extended "Eva" icon font familiy.
Example Usage
vue
<template>
<SkIcon name="play-circle" fill="yellow" />
<SkIcon name="arrow-right" />
<SkIcon name="close" />
<SkIcon name="folder" fill="orange" />
<SkIcon name="folder-updated" :active="true" fill="orange" />
<SkIcon name="file" :active="true" fill="green" />
<SkIcon name="interface-gap" fill="green" mode="fill" />
</template>Properties
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| name | String | true | Specifies the type of the icon | |
| fill | String | true | 'yellow', 'orange', 'purple', 'blue', 'green' and all other styles from Colors. The color is by default only shown on hover. | |
| active | Boolean | false | false | If active, the fill color will be shown by default |
All Icons
Here's the full list of supported icons:
| Name | Icon | Mode = "Filled" |
|---|---|---|
| activity | ||
| alert-circle | ||
| alert-triangle | ||
| archive | ||
| arrow-back | ||
| arrow-circle-down | ||
| arrow-circle-left | ||
| arrow-circle-right | ||
| arrow-circle-up | ||
| arrow-down | ||
| arrow-downward | ||
| arrow-forward | ||
| arrow-ios-back | ||
| arrow-ios-downward | ||
| arrow-ios-forward | ||
| arrow-ios-upward | ||
| arrow-left | ||
| arrow-right | ||
| arrow-up | ||
| arrow-upward | ||
| arrowhead-down | ||
| arrowhead-left | ||
| arrowhead-right | ||
| arrowhead-up | ||
| at | ||
| attach-2 | ||
| attach | ||
| award | ||
| backspace | ||
| bar-chart-2 | ||
| bar-chart | ||
| battery | ||
| behance | ||
| bell-off | ||
| bell | ||
| bluetooth | ||
| book-open | ||
| book | ||
| bookmark | ||
| briefcase | ||
| browser | ||
| brush | ||
| bulb | ||
| calendar | ||
| camera | ||
| car | ||
| cast | ||
| charging | ||
| checkmark-circle-2 | ||
| checkmark-circle | ||
| checkmark-square-2 | ||
| checkmark-square | ||
| checkmark | ||
| chevron-down | ||
| chevron-left | ||
| chevron-right | ||
| chevron-up | ||
| clipboard | ||
| clock | ||
| close-circle | ||
| close-square | ||
| close | ||
| cloud-download | ||
| cloud-upload | ||
| code-download | ||
| code | ||
| collapse | ||
| color-palette | ||
| color-picker | ||
| compass | ||
| copy | ||
| corner-down-left | ||
| corner-down-right | ||
| corner-left-down | ||
| corner-left-up | ||
| corner-right-down | ||
| corner-right-up | ||
| corner-up-left | ||
| corner-up-right | ||
| credit-card | ||
| crop | ||
| crown | ||
| cube | ||
| diagonal-arrow-left-down | ||
| diagonal-arrow-left-up | ||
| diagonal-arrow-right-down | ||
| diagonal-arrow-right-up | ||
| done-all | ||
| download | ||
| droplet-off | ||
| droplet | ||
| edit-2 | ||
| edit | ||
| expand | ||
| external-link | ||
| eye-off-2 | ||
| eye-off | ||
| eye | ||
| file-add | ||
| file-remove | ||
| file-text | ||
| file | ||
| film | ||
| flag | ||
| flash-off | ||
| flash | ||
| flip-2 | ||
| flip | ||
| folder-add | ||
| folder-push | ||
| folder-remove | ||
| folder-updated | ||
| folder | ||
| funnel | ||
| gift | ||
| github | ||
| globe-2 | ||
| globe-3 | ||
| globe | ||
| grid | ||
| hard-drive | ||
| hash | ||
| headphones | ||
| heart | ||
| home | ||
| image-2 | ||
| image | ||
| inbox | ||
| info | ||
| interface-gap | ||
| interface-label | ||
| interface-list | ||
| interface-longtext | ||
| interface-mpc-audio | ||
| interface-mpc-image | ||
| interface-mpc | ||
| interface-text | ||
| keypad | ||
| layers | ||
| layout | ||
| link-2 | ||
| link | ||
| list | ||
| lock | ||
| log-in | ||
| log-out | ||
| map | ||
| maximize | ||
| menu-2 | ||
| menu-arrow | ||
| menu | ||
| message-circle | ||
| message-square | ||
| mic-off | ||
| mic | ||
| minimize | ||
| minus-circle | ||
| minus-square | ||
| minus | ||
| monitor | ||
| moon | ||
| more-horizontal | ||
| more-vertical | ||
| move | ||
| music | ||
| navigation-2 | ||
| navigation | ||
| npm | ||
| options-2 | ||
| options | ||
| pantone | ||
| paper-plane | ||
| pause-circle | ||
| people | ||
| percent | ||
| person-add | ||
| person-delete | ||
| person-done | ||
| person-remove | ||
| person | ||
| phone-call | ||
| phone-missed | ||
| phone-off | ||
| phone | ||
| pie-chart-2 | ||
| pie-chart | ||
| pin | ||
| play-circle | ||
| play | ||
| plus-circle | ||
| plus-square | ||
| plus | ||
| power | ||
| pricetags | ||
| printer | ||
| question-mark-circle | ||
| question-mark | ||
| radio-button-off | ||
| radio-button-on | ||
| radio | ||
| recording | ||
| refresh | ||
| repeat | ||
| rewind-left | ||
| rewind-right | ||
| save | ||
| scissors | ||
| search | ||
| settings-2 | ||
| settings | ||
| shake | ||
| share | ||
| shield-off | ||
| shield | ||
| shopping-bag | ||
| shopping-cart | ||
| shuffle-2 | ||
| shuffle | ||
| skip-back | ||
| skip-forward | ||
| slash | ||
| smartphone | ||
| smiling-face | ||
| speaker | ||
| square | ||
| star | ||
| stop-circle | ||
| sun | ||
| swap | ||
| sync | ||
| text | ||
| thermometer-minus | ||
| thermometer-plus | ||
| thermometer | ||
| toggle-left | ||
| toggle-right | ||
| trash-2 | ||
| trash | ||
| trending-down | ||
| trending-up | ||
| tv | ||
| umbrella | ||
| undo | ||
| unlock | ||
| upload | ||
| video-off | ||
| video | ||
| volume-down | ||
| volume-mute | ||
| volume-off | ||
| volume-up | ||
| wifi-off | ||
| wifi |