@wwtdev/bsds-icons-vue3
v2.11.0
Published
Vue3 Icon Components for the WWT BSDS
Downloads
170
Readme
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
- Remove the base
@wwtdev/bsds-icons
package, as this Vue 3 package no longer depends on the former. - This package no longer provides or requires a Vue plugin.
- This package does provide a small stylesheet, which you'll need to bring into your app. See above for example.
- 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.