# @wwtdev/bsds-icons-vue3

> Vue3 Icon Components for the WWT BSDS

Latest version **2.35.1** (published 2026-08-06) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @wwtdev/bsds-icons-vue3
pnpm add @wwtdev/bsds-icons-vue3
yarn add @wwtdev/bsds-icons-vue3
bun add @wwtdev/bsds-icons-vue3
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.35.1 |
| Published | 2026-08-06 |
| First published | 2022-10-28 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 3.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wwt_core_dev, joeawatts, desantim, briancoles-wwt |

## Links

- npm: https://www.npmjs.com/package/@wwtdev/bsds-icons-vue3
- npm.io page: https://npm.io/package/@wwtdev/bsds-icons-vue3

## Recent versions

- 2.35.1 (latest) — 2026-08-06
- 2.35.0 — 2026-07-06
- 2.34.0 — 2026-05-14
- 2.33.0 — 2026-05-12
- 2.32.0 — 2026-04-23
- 2.31.0 — 2026-04-16
- 2.30.0 — 2026-03-31
- 2.29.0 — 2026-02-13
- 2.28.0 — 2026-01-29
- 2.27.0 — 2025-12-03
- 2.26.0 — 2025-11-17
- 2.25.0 — 2025-10-13
- 2.24.1 — 2025-09-22
- 2.24.0 — 2025-09-19
- 2.23.1 — 2025-07-11
- … 49 more at https://npm.io/package/@wwtdev/bsds-icons-vue3/versions

## README

# Blue Steel Icons (Vue 3)

## Installation

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

### Vue App Setup

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

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

### Nuxt App Setup

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

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

## Usage (Specific Icons)


```javascript
<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.

```javascript
<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)

---
_Source: https://npm.io/package/@wwtdev/bsds-icons-vue3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._