
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
@jamescoyle/vue-icon
Advanced tools
Consider using the webcomponent version of this component for an icon component that can be used in any modern browser with any framework.
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.
Install from NPM
npm install @jamescoyle/vue-icon
Import into your project
import SvgIcon from '@jamescoyle/vue-icon'
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>
Name | Default | Description |
---|---|---|
type | null | This sets the size and viewbox to match the recommended size for the icon pack specified. |
path | null | Required. An SVG path to render as an icon |
size | 24 | The width and height of the SVG element |
viewbox | "0 0 24 24" | The viewBox of the SVG element |
flip | null | One of "horizontal", "vertical", or "both". Flips the icon in the specified direction(s). |
rotate | 0deg | Rotates the icon by the specified value. Can be any valid CSS angle value. |
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.
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.
FAQs
Icon component for Vue.js
The npm package @jamescoyle/vue-icon receives a total of 7,299 weekly downloads. As such, @jamescoyle/vue-icon popularity was classified as popular.
We found that @jamescoyle/vue-icon demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.