Icon

Props

Prop	Type	Default/Notes
`icon`	`String`	Default: `heart`; Pass an icon, refer to the icon list or guide
`iconText`	`String`	Pass a text character to use instead of an icon, ex: `iconText="W"`
`spinning`	`Boolean`	Default: `false`; Spinning icon (infinite animation)

Example usage

<template>
	<Icon icon="heart" />
</template>

<script>
	import { Icon } from 'figma-plugin-ds-vue'

	export default {
		components: {
			Icon
		}
	}
</script>

Icons

Available icons

Icon	Name
	`adjust`
	`alert`
	`angle`
	`arrow-left-right`
	`arrow-up-down`
	`auto-layout-horizontal`
	`auto-layout-vertical`
	`back`
	`blend-empty`
	`blend`
	`break`
	`caret-left`
	`caret-up`
	`caret-right`
	`caret-down`
	`check`
	`close`
	`component`
	`corner-radius`
	`corners`
	`distribute-horizontal-spacing`
	`distribute-vertical-spacing`
	`draft`
	`effects`
	`ellipses`
	`eyedropper`
	`forward`
	`frame`
	`group`
	`heart`
	`heart-fill`
	`hidden`
	`horizontal-padding`
	`hyperlink`
	`image`
	`instance`
	`key`
	`align-horizontal-centers`
	`align-vertical-centers`
	`align-left`
	`align-top`
	`align-right`
	`align-bottom`
	`layout-grid-columns`
	`layout-grid-rows`
	`layout-grid-uniform`
	`library`
	`link-broken`
	`link-connected`
	`list-detailed`
	`list-tile`
	`list`
	`lock-off`
	`lock-on`
	`minus`
	`play`
	`plus`
	`random`
	`recent`
	`resize-to-fit`
	`resolve-filled`
	`resolve`
	`search-large`
	`search`
	`settings`
	`share`
	`smiley`
	`sort-alpha-asc`
	`sort-alpha-dsc`
	`sort-top-bottom`
	`spacing`
	`spinner`
	`star-off`
	`star-on`
	`stroke-weight`
	`styles`
	`swap`
	`theme`
	`tidy-up-grid`
	`tidy-up-list-horizontal`
	`tidy-up-list-vertical`
	`timer`
	`trash`
	`vertical-padding`
	`warning-large`
	`warning`

Use custom icons

To use a custom icon in your components, create a .icon--[yourIconName] CSS class and specify the SVG icon as a background-image. You then can pass your icon name to the icon prop.

Example

Style (make sure to prepend icon-- to your custom icon name)

.icon--yourIconName {
	background-image: url('<your_relative_path>/custom-icon.svg');
}

Vue file

<Icon icon="yourIconName">

Heads up

You have to inline your icons when bundling for production, e.g. by base64 encoding. The reason is that Figma plugins do not support any asset files.

When using Vue CLI or webpack for bundling, one strategy is to use url-loader to inline all image assets:

module.exports = {
	chainWebpack: (config) => {
		// Inline svg icons since Figma doesn't support assets
		config.module.rule('svg').uses.clear()
		config.module
			.rule('svg')
			.test(/\.(svg)$/)
			.use('url-loader')
			.loader('url-loader')
	}
}

✨ Icons that are included in figma-plugin-ds-vue are already inlined and do not need any further action.

Divider Icon Button

On this page

Icon

Props

Example usage

Icons