Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@jamescoyle/vue-icon

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@jamescoyle/vue-icon

Icon component for Vue.js

  • 0.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Consider using the webcomponent version of this component for an icon component that can be used in any modern browser with any framework.

Vue Icon Component

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

Usage

  1. Install from NPM

    npm install @jamescoyle/vue-icon
    
  2. Import into your project

    import SvgIcon from '@jamescoyle/vue-icon'
    

SFC Example

The following example uses @mdi/js which provides a wide range of icon paths. It shows how you might use an icon within a single file component.

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


<script>
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiAccount } from '@mdi/js'

export default {
	name: "my-cool-component",

	components: {
		SvgIcon
	},

  	data() {
		return {
			path: mdiAccount,
	  	}
  	}
}
</script>

Props

NameDefaultDescription
typenullThis sets the size and viewbox to match the recommended size for the icon pack specified.
pathnullRequired. An SVG path to render as an icon
size24The width and height of the SVG element
viewbox"0 0 24 24"The viewBox of the SVG element
flipnullOne of "horizontal", "vertical", or "both". Flips the icon in the specified direction(s).
rotate0degRotates the icon by the specified value. Can be any valid CSS angle value.

Styling

By default the icon will inherit the current font color of the container it is placed within. You can easily provide a specific color 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.

Keywords

FAQs

Package last updated on 09 Aug 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc