@wwtdev/bsds-icons-nuxt
v1.1.3
Published
Nuxt Icon Components for the WWT BSDS
Downloads
8
Readme
BSDS Icons for Nuxt 2
Installation
npm install --save @wwtdev/bsds-icons-nuxt
Using the Components
Our Nuxt package simply wraps the SVG asset in a <div>
. Now you can use BSDS Icons in your code as a standard Vue components:
<script>
import { BsIconAccessibility } from '@wwtdev/bsds-icons-nuxt'
export default {
components: {
BsIconAccessibility,
}
}
</script>
<template>
<BsIconAccessibility class="w-4 h-4" size="auto"></BsIconAccessibility>
</template>
This renders as:
<div class="w-4 h-4">
<svg height="100%" width="100">
<!-- svg contents -->
</svg>
</div>
Props
Size: ["sm", "md", "lg", "xl", "2xl", "3xl", "auto" ]
- sm: sets svg width and height to 12
- md: sets svg width and height to 16 (default)
- lg: sets svg width and height to 24
- xl: sets svg width and height to 32
- 2xl: sets svg width and height to 48
- 3xl: sets svg width and height to 64
- auto: sets svg width and height to 100%. Use this when you prefer to set the size of the container*
- *Each svg is wrapped in a container div
Color: Sets the fill value.