<template lang="pug">
	svg.flex-shrink-0.fill-current.o-icon(
		aria-hidden="true"
		:class="className"
	)
		use(
			:xlink:href="`${path}#${name}`"
		)
</template>

<script>
export default {
	props: {
		/**
		 * (file)name of the icon
		 */
		name: {
			type: String,
			required: true,
		},
		/** path of the spritemap */
		path: {
			type: String,
			default: '',
		},
	},
	computed: {
		className() {
			const { name } = this
			let iconSizeClass = 'o-icon--'

			if (name.includes('12')) {
				iconSizeClass += 'xs'
			} else if (name.includes('16')) {
				iconSizeClass += 's'
			} else if (name.includes('24')) {
				iconSizeClass += 'm'
			} else if (name.includes('32')) {
				iconSizeClass += 'l'
			} else if (name.includes('36')) {
				iconSizeClass += 'xl'
			} else {
				iconSizeClass = ''
			}

			return {
				[iconSizeClass]: !!iconSizeClass,
			}
		},
	},
}
</script>

<docs>
```jsx
<!--
You don't need to specify path since HtmlWebpackPlugin will add the spritemap.svg content to the layout
For styleguide use, I need to specify the path to /spritemap.svg, since HtmlWebpackPlugin can't be configured for styleguidist
default location of the icons in the source is src/icons/

NOTE: remove the `fill` attribute from icon svg to ensure the color is correct. `<Icon>` default color is the current color of the parent
-->

<!-- Recommended use, but not working on this styleguide  -->
<Icon name="facebook24" />

<!-- o-icon--xl class will be added automatically since there's "36" in the name (36px size) -->
<div class="text-primary">
	<Icon name="facebook24" path="/spritemap.svg" />

	<!-- Small -->
	<Icon name="facebook" path="/spritemap.svg" class="o-icon--s" />

	<!-- Extra small -->
	<Icon name="facebook" path="/spritemap.svg" class="o-icon--xs" />
</div>


```
</docs>
