Icon

Narrative's icon component and icon library

Selector

nio-icon

Props

Prop name	Type	Supported values	Default value
name	string	any icon name from Tacklebox library
size	string	any numerical string	"22"
color	string	any valid color string	'#000000'

Prop details:

:name

The icon name. Supports any icon from the Tacklebox icon library (see below)

:size

The icon size in pixels

:color

The icon's stroke color. Supports any valid color string (e.g. 'black', '#FFF', 'rgba(128, 128, 128, 0.5)')

Events

@mounted

Emits when the component's mounted lifecycle method is executed

@destroyed

Emits when the component's destroyed lifecycle method is executed

Slots

This component does not support any slots

Example

The following is a simple example of how to use this component in a Vue template:

<nio-icon name="display-list" size="32" color="#ABC"></nio-icon>

Icon Library

The following icons are supported by the Icon component:

Name	Result
display-new
display-list
display-reports
display-preferences
display-quick-start
display-listmanager
display-sources
display-destinations
display-payment
display-help
display-email
display-website
display-security
display-privacy
display-module
display-search
display-notification
display-subscriptions
display-hamburger
display-logout
display-close
display-file
display-company
display-cart
display-upload
display-download
display-yourprofile
display-warning
display-invoice
display-kb
display-budget
display-list-warning
display-curvy-arrow

Name	Result
utility-exclamation
utility-code
utility-plus
utility-chevron-left
utility-times
utility-trash
utility-external-link
utility-more
utility-chevron-right
utility-arrow-left
utility-arrow-right
utility-arrow-down
utility-trash
utility-android
utility-apple
utility-lock
utility-search
utility-chevron-down
utility-dollar-sign
utility-envelope
utility-link
utility-linkedin
utility-twitter
utility-eye
utility-eye-slash
utility-check-circle
utility-chevron-up

Source Code

This component's source code is included for your reference