BSDS Icons for Vue 2

Installation

npm install --save @wwtdev/bsds-icons-vue2

Using the Components

Add the following to your main.js file to import and use the component library:

import { ComponentLibrary as Icons } from '@wwtdev/bsds-icons-vue2'

Vue.use(Icons)

/* ... set up options, other plugins ... */

new Vue(options).$mount('#app')

Now you can use BSDS Icons in your code, just like standard Vue components:

<script>
import { BsIconAccessibility } from '@wwtdev/bsds-icons-vue2'

export default {
    components: {
        BsIconAccessibility,
    }
}
</script>

<template>
  <BsIconAccessibility class="w-4 h-4" size="auto"></BsIconAccessibility>
</template>

This renders as:

  <bs-icon-accessibility class="w-4 h-4">
    <svg height="100%" width="100">
      <!-- svg contents -->
    </svg>
  </bs-icon-accessibility>

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 element

Color: Sets the fill value.