npm i -D dls-icons-vue
<template>
<div class="title">
<h1>
Hello Icons
<icon-arrow-right style="{ color: '#999', marginLeft: '5px' }" />
</h1>
</div>
</template>
<script>
import { IconArrowRight } from 'dls-icons-vue'
export default {
components: {
IconArrowRight
}
}
</script>
Whether the icon is spinning. Default: false
. You can use --dls-icon-spin-duration
to customize the time it takes for one turn. The default value is 1s
.
Whether the icon is active. Default: undefined
. If active
is undefined
, the icon will be in default state. Otherwise it will be in active or inactive state depending on the truthiness of active
.
Note To make
active
prop work properly, you should render aSharedResources
component in your root component. eg.<script> import { SharedResources } from 'dls-icons-vue' export default { components: { SharedResources } } </script> <template> <div id="app"> <shared-resources /> ... </div> </template>
import { dataArrowRight } from 'dls-icons-vue'
/*
{
{
name: 'icon-arrow-right',
content: '<path d="..." ...',
width: 24,
height: 24
}
}
*/
console.log(dataArrowRight)