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

@farnabaz/svg-sprite

v1.0.0-alpha.1

Published

Easy way to use and optimize svg files in Nuxt.js

Downloads

1

Readme

SVG Sprite Module

npm (scoped with tag) npm

Optimized and Easy way to use SVG files in Nuxt.js

Sprites help increase speed, maintain a consistent development workflow, and make the creation of icons much faster. SVG sprites are typically created using icons of a similar shape or form whereas larger scale graphics are one-off applications.

Demo: https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/

:warning: NOTE: SVG Sprites does not work on IE, if you wish to support IE you could use svg4everybody. Take a look at this issue to see how.

:rainbow: NOTE: If you wish to load single SVG icon and you don't want to create sprites, use Nuxt SVG Module. SVG module for Nuxt.js, allows you to import .svg files in multiple ways depending on the resource query you provide.

Installation

yarn add @nuxtjs/svg-sprite
# or
npm i @nuxtjs/svg-sprite

Usage

Add @nuxtjs/svg-sprite to buildModules section of nuxt.config.js:

{
  buildModules: [
    '@nuxtjs/svg-sprite',
  ],
  svgSprite: {
    // manipulate module options
  }
}

Place your svg files in ~/assets/sprite/svg/, say sample.svg and use your image with globally registered svg-icon component:

<svg-icon name="sample" />

To create different sprites, create custom directory inside ~/assets/sprite/svg/ and put your svg files inside it and place directory tile before icon name (example: ~/assets/sprite/svg/my-sprite/my-image.svg):

<svg-icon name="my-sprite/my-image" />

Module create a page that list all of icons for you, by default you can see this page in /_icons path.
Note: This page creates in dev mode, So you can't see it in production.

Options

Module default options:

| Option | Default | Description | | ------ | ------- | ----------- | | input | ~/assets/sprite/svg | Directory of original svg files | | output | ~/assets/sprite/gen | Directory to store generated sprites | | defaultSprite | icons | Name of default sprite (default sprite consist of all svgs that place directly inside input directory) | | elementClass | icon | global class of all <svg-icon> instances | | spriteClassPrefix | sprite- | Prefix of sprite specific classes | | publicPath | null | Specifies a custom public path for the sprites | | iconsPath | _icons | Custom path for icons list page (In order to disable this page, pass false or null to this option) | | svgoConfig | null | Custom config object for SVGO, How to customize SVGO config |

You can update them with the svgSprite option in nuxt.config.js:

export default {
  buildModules: ['@nuxtjs/svg-sprite'],
  svgSprite: {
    input: '~/assets/svg/'
  }
}

Props

| Prop | Description | | --- | --- | | name | icon path with format SPRITE_NAME/ICON_NAME, SPRITE_NAME can be omitted for default sprite | | title | Accessibility title for icon, this props will transform to <title> tag inside <svg> | | desc | Accessibility description for icon, this props will transform to <desc> tag inside <svg> |

Integrations

Storybook

This module provides a story to list and search available icons of your project. You can see stories under stories directory. If you are using @nuxtjs/storybook you can see the SvgSprites stories under Modules section in your storybook. Sprites will show in your Storybook, unless you disable/hide the story using Storybook's modules option

Development

  • Clone this repository
  • Install dependencies using yarn install or npm install
  • Start development server using npm run dev

You can also contribute directly with CodeSandBox: https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/

License

MIT License Copyright (c) Nuxt Community - Ahad Birang