@wwtdev/bsds-icons-vue3

BSDS Icons for Vue 3

Installation

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

Using the Components

Add the following to your main.js file to include the base styles:

import '@wwtdev/bsds-icons-vue3/lib/style.css'

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

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

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

<template>
  <BsIconAccessibility class="w-8 h-8"></BsIconAccessibility>
</template>

This renders as:

  <span class="bs-icon w-8 h-8" data-component="bs-icon-accessibility" data-size="md">
    <svg data-size="md">
      <!-- svg contents -->
    </svg>
  </span>

/* 

Note that any applied width/height-related styles with 
specificity >= 0-0-1 will supersede the sizing set via prop.

For example, the tailwind classes above will prevail, resulting in
width/height set to 2rem instead of 1rem (size "md").  

*/

Migration from v1

1. Remove the base @wwtdev/bsds-icons package, as this Vue 3 package no longer depends on the former.
2. This package no longer provides or requires a Vue plugin.
3. This package does provide a small stylesheet, which you'll need to bring into your app. See above for example.
4. Each component renders the svg inside a <span data-component="bs-icon-name-of-icon">, so if you have any CSS or DOM-related logic that relied on the previous version's custom element tag selectors, you'll need to update those accordingly. Example:

\\ v1
bs-icon-accessibility { height: 10rem; } 

\\ v2 - if retaining previous specificity...
span:where([data-component="bs-icon-accessibility"]) { height: 10rem; }

Props

Size: ["sm", "md", "lg", "xl", "2xl", "3xl", "auto" ]

• sm: sets width and height to 12
• md: sets width and height to 16 (default)
• lg: sets width and height to 24
• xl: sets width and height to 32
• 2xl: sets width and height to 48
• 3xl: sets width and height to 64
• auto: sets width and height to 100%*

*Each svg is wrapped in a container span; the sizes above are applied to the container and the svg will fill the space. As previously noted, these sizes can be overridden by applying styles (e.g., tailwind utilities) on the component. This is different from V1, which applied width/height directly on the svg and required that you pass size="auto" in order to override via CSS class.

Color: Sets the fill value.

Dynamic Icon Component

From v2.3.0, this package also provides a BsIcon component, which you can use to dynamically render any icon included in this package via the name prop. The name prop expects a string w/ format IconName or icon-name, without the BsIcon (or bs-icon-) prefix.

Example:

<template>
  <!-- This works -->
  <BsIcon name="accessibility" size="lg" />
  <BsIcon name="color-wwt-logo" size="lg" />

  <!-- This also works -->
  <BsIcon name="Accessibility" size="lg" />
  <BsIcon name="ColorWwtLogo" size="lg" />
</template>

Note that this uses Vue's defineAsyncComponent under the hood.