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)