# @wwtdev/bsds-icons-vue2

> Vue2 Icon Components for the WWT BSDS

Latest version **2.20.0** (published 2025-05-13) · UNLICENSED license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.20.0 |
| Published | 2025-05-13 |
| First published | 2022-10-28 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 417.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | joeawatts, steven.brien, desantim |

## Links

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

## Dependencies (1)

- [@wwtdev/bsds-icons](https://npm.io/package/@wwtdev/bsds-icons.md) ^2.20.0

## Recent versions

- 2.20.0 (latest) — 2025-05-13
- 2.19.0 — 2025-04-18
- 2.18.0 — 2025-04-14
- 2.17.0 — 2025-03-31
- 2.16.0 — 2025-03-07
- 2.15.0 — 2025-03-05
- 2.14.0 — 2025-02-13
- 2.13.0 — 2025-01-16
- 2.12.0 — 2024-12-05
- 2.11.0 — 2024-11-19
- 2.10.0 — 2024-10-28
- 2.9.0 — 2024-10-04
- 2.8.0 — 2024-10-02
- 2.7.0 — 2024-06-04
- 2.6.0 — 2024-05-03
- … 28 more at https://npm.io/package/@wwtdev/bsds-icons-vue2/versions

## README

# BSDS Icons for Vue 2

## Installation

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

## Using the Components

Add the following to your `main.js` file to import and use the component library:

```javascript
import { ComponentLibrary as Icons } from '@wwtdev/bsds-icons-vue2'

Vue.use(Icons)

/* ... set up options, other plugins ... */

new Vue(options).$mount('#app')
```

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

```javascript
<script>
import { BsIconAccessibility } from '@wwtdev/bsds-icons-vue2'

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

<template>
  <BsIconAccessibility class="w-4 h-4" size="auto"></BsIconAccessibility>
</template>
```

This renders as:

```javascript

  <bs-icon-accessibility class="w-4 h-4">
    <svg height="100%" width="100">
      <!-- svg contents -->
    </svg>
  </bs-icon-accessibility>

```


## Props

**Size**: ["sm", "md", "lg", "xl", "2xl", "3xl", "auto" ]
- **sm:** sets svg width and height to 12
- **md:** sets svg width and height to 16 (default)
- **lg:** sets svg width and height to 24
- **xl:** sets svg width and height to 32
- **2xl:** sets svg width and height to 48
- **3xl:** sets svg width and height to 64
- **auto:** sets svg width and height to 100%. Use this when you prefer to set the size of the container*
  - *Each svg is wrapped in a container element

**Color**: Sets the fill value.

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