Place scalable vector icons anywhere in your content.
Vuikit provides a comprehensive SVG icon library, which comprises a considerate number of elegant outline icons. This component render those icons with specific styles so they inherit color just like your text does.
Use the vk-icon or vk-icon-link components specifying the icon name in the icon prop.
<vk-icon icon="check"></vk-icon>
<vk-icon-link href icon="heart"></vk-icon-link>Note Make sure to integrate the icons library or register the icons beforehand, for more details see the Icons guide.
Add the :ratio="2" prop to double its size – or any other number, depending on how big you want you icon to be.
<vk-icon icon="check" ratio="2"></vk-icon>To reset the default link styling to a more muted color when using an icon inside an anchor, use the vk-icon-link component.
<vk-icon-link reset href icon="heart"></vk-icon-link>Use the vk-icon-button component to render an icon button, which can be used for social icons.
<vk-icon-button href="" icon="twitter"></vk-icon-button>You can also make any background image scale to the size of an icon. Use the vk-icon-image component and a background image path.
| Name | Type | Default | Description |
|---|---|---|---|
icon | String | -- | The icon to display. |
ratio | String, Number | 1 | The icon size ratio. |
| Name | Type | Default | Description |
|---|---|---|---|
icon | String | -- | The icon to display. |
href | String | -- | The link anchor href property. |
ratio | String, Number | 1 | The icon size ratio. |
| Name | Type | Default | Description |
|---|---|---|---|
icon | String | -- | The icon to display. |
href | String | -- | The link anchor href property. |
ratio | String, Number | 1 | The icon size ratio. |
reset | Boolean | false | Resets link styling to a more muted color. |
| Name | Type | Default | Description |
|---|---|---|---|
src | String | -- | The image to display. |
Note width, height and viewBox attributes will be passed on to the SVG making it possible to fine tune the icon display.