@wwtdev/bsds-icons-vue3

Blue Steel Icons (Vue 3)

Installation

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

Vue App Setup

Add the following to your Vue app's main.js file to import styles:

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

Nuxt App Setup

Add the following to your nuxt.config.js file to import styles:

export default defineNuxtConfig({
  ...
  css: [
    '@wwtdev/bsds-icons-vue3/lib/style.css'
  ],
  ...
})

Usage (Specific Icons)

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

<template>
<BsIconAccessibility></BsIconAccessibility>
</template>

Props

Name	Type	Required	Default	Description
size	"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"|"auto"	No	"md"	Sets the width and height of the icon
color	string	No	"currentColor"	Sets the fill value
title	string	No	''	Sets the title attribute of the svg element (for accessibility)

size Mapping

Size	Pixel Value
sm	12
md	16
lg	24
xl	32
2xl	48
3xl	64
auto	100%

Usage (Dynamic Icon)

Note: this component asynchronously pulls icons from the CDN, so there will be a network call involved and a brief period of no icon showing up.

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

<template>
<BsIcon name="accessibility" />
</template>

Props

Name	Type	Required	Default	Description
name	string	Yes	-	Name of the icon to load. See name formats above for allowed formats
size	"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"|"auto"	No	"md"	Sets the width and height of the icon
color	string	No	"currentColor"	Sets the fill value
title	string	No	''	Sets the title attribute of the svg element (for accessibility)

name Formats

• icon-name (e.g. icon-caret-down)
• IconName (e.g. IconCaretDown)
• bs-icon-name (e.g. bs-icon-caret-down)
• BsIconName (e.g. BsIconCaretDown)
• Name (e.g. CaretDown)

size Mapping

(see Size Mapping table for specific icon sizes above)