npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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

  1. Remove the base @wwtdev/bsds-icons package, as this Vue 3 package no longer depends on the former.
  2. This package no longer provides or requires a Vue plugin.
  3. This package does provide a small stylesheet, which you'll need to bring into your app. See above for example.
  4. 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.