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

vue3-icon

v3.0.3

Published

Icon component for Vue 3

Downloads

12,738

Readme

NPM Version Licence: MIT NPM Downloads

Vue 3 Icon

An icon component which makes it easy to render SVG path-based icons in any Vue 3 project. It provides several helpful properties to manipulate the icon and supports any icon pack which provides icons as a single SVG path to be displayed within a square element.

Installation

npm install vue3-icon
# OR
yarn add vue3-icon
# OR
pnpm add vue3-icon

Usage

Global Vue Usage

import { createApp } from "vue";
import SvgIcon from "vue3-icon";

const app = createApp();
app.component("svg-icon", SvgIcon);

app.mount("#app");

Local Usage (Options API)

<script>
import SvgIcon from "vue3-icon";
export default {
	components: {
		SvgIcon
	}
}
</script>

Local Usage (Composition API)

<script>
import SvgIcon from "vue3-icon";
export default {
	setup() {
		return {
			SvgIcon
		}
	}
}
</script>

SFC Examples

All examples assume that the vue3-icon component is installed globally and the Compositon API is used

Material Design Icons @mdi/js

<template>
  <svg-icon type="mdi" :path="mdiAccount" :size="48"></svg-icon>
</template>


<script>
import { mdiAccount } from '@mdi/js'

export default {
  	setup() {
		return {
			mdiAccount,
	  	}
  	}
}
</script>

FontAwesome Icons

<template>
  <svg-icon :fa-icon="faCoffee" :size="96" flip="horizontal"></svg-icon>
</template>


<script>
import { faCoffee } from "@fortawesome/free-solid-svg-icons";

export default {
  	setup() {
		return {
			faCoffee,
	  	}
  	}
}
</script>

Simple Icons

<template>
  <svg-icon type="simple-icons" :path="siAndela.path" size="24"></svg-icon>
</template>


<script>
import {siAndela} from 'simple-icons/icons';

export default {
  	setup() {
		return {
			siAndela,
	  	}
  	}
}
</script>

Custom SVG Icons

<template>
  <svg-icon :path="myCustomIcon" size="24" viewbox="0 0 24 24"></svg-icon>
</template>


<script>
const myCustomIcon = "M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z";


export default {
  	setup() {
		return {
			myCustomIcon,
	  	}
  	}
}
</script>

Props

| Name | Type | Default | Description | | ------- | ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ | | type | String | null | This sets the size and viewbox to match the recommended size for the icon pack specified. | | path | String | Array | null | An SVG path(s) to render as an icon. | | fa-icon | Object | null | A FontAwesome icon object as imported from one of their available SVG libraries. | | size | Number | String | 24 | The width and height of the SVG element. | | viewbox | String | "0 0 24 24" | The viewBox of the SVG element. | | flip | String | null | One of "horizontal", "vertical", or "both". Flips the icon in the specified direction(s). | | rotate | Number | String | 0deg | Rotates the icon by the specified value. Can be any valid CSS angle value. | | no-namespace | Boolean | false | Don't render the xml namespace attribute on the SVG element. | | no-styles | Boolean | false | Don't render any SVG/Path styles (handle externally), disables flip and rotate. | | no-dimensions | Boolean | false | Don't render the width or height attributes. |

Styling

By default, the icon will inherit the current font colour of the container it is placed within. You can easily provide a specific colour using an inline style on the element (style="color: red") or can target the tag as normal with CSS rules.

Accessibility

You should make use of aria attributes to improve accessibility for users that use screen reading technology. You can use aria-labelledby to create a link between an icon and its label. A descriptive aria-label can be used to allow screen readers to announce an icon if there is no visual label to accompany it.