GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → gaven → nuxt-svg-sprite-module

gaven / nuxt-svg-sprite-module

Licence: other
A quick and dirty way to inline svg sprites in your Nuxt app.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

vuespritesnuxtnuxt-module

Projects that are alternatives of or similar to nuxt-svg-sprite-module

nuxt-typo3
TYPO3 Frontend rendered in Vue.js and Nuxt (frontend for EXT:headless)
Stars: ✭ 66 (+214.29%)
Mutual labels:  nuxt, nuxt-module
nuxt-babel
Use normal .babelrc file with your Nuxt app
Stars: ✭ 32 (+52.38%)
Mutual labels:  nuxt, nuxt-module
yamlful
YAML-based HTTP client code generation
Stars: ✭ 77 (+266.67%)
Mutual labels:  nuxt, nuxt-module
nuxt-viewport
🌈 Define custom viewports for your Nuxt project
Stars: ✭ 55 (+161.9%)
Mutual labels:  nuxt, nuxt-module
nuxt-storyblok-queries
Nuxt.js module to simplify queries to the Storyblok API
Stars: ✭ 17 (-19.05%)
Mutual labels:  nuxt, nuxt-module
nuxt-mail
Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.
Stars: ✭ 62 (+195.24%)
Mutual labels:  nuxt, nuxt-module
separate-env-module
Tear your variables apart!
Stars: ✭ 53 (+152.38%)
Mutual labels:  nuxt, nuxt-module
nuxt-sanity
Easily integrate Sanity in your Nuxt.js project.
Stars: ✭ 14 (-33.33%)
Mutual labels:  nuxt, nuxt-module
k-domains
A simple module to manage multiple subdomains with just one project
Stars: ✭ 41 (+95.24%)
Mutual labels:  nuxt, nuxt-module
global-components
Module to register global components for Nuxt.js
Stars: ✭ 57 (+171.43%)
Mutual labels:  nuxt, nuxt-module
nuxt-prune-html
🔌⚡ Nuxt module to prune html before sending it to the browser (it removes elements matching CSS selector(s)), useful for boosting performance showing a different HTML for bots/audits by removing all the scripts with dynamic rendering
Stars: ✭ 69 (+228.57%)
Mutual labels:  nuxt, nuxt-module
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (+400%)
Mutual labels:  sprites, nuxt
nuxt-stencil
Easy Stencil.js component library integration with Nuxt.js.
Stars: ✭ 16 (-23.81%)
Mutual labels:  nuxt, nuxt-module
nuxt-winston-log
Nuxt module for logging SSR errors using winston
Stars: ✭ 41 (+95.24%)
Mutual labels:  nuxt, nuxt-module
nuxt-jsonld
A Nuxt.js module to manage JSON-LD in Vue component.
Stars: ✭ 198 (+842.86%)
Mutual labels:  nuxt, nuxt-module
date-fns-module
Modern JavaScript date utility library - date-fns for Nuxt.js
Stars: ✭ 68 (+223.81%)
Mutual labels:  nuxt, nuxt-module
supabase
An easy way to integrate Supabase with NuxtJS
Stars: ✭ 39 (+85.71%)
Mutual labels:  nuxt, nuxt-module
nuxt-stripejs
💳 NuxtJS module for Stripe.js which loads only when required and w/ retry mechanism
Stars: ✭ 17 (-19.05%)
Mutual labels:  nuxt, nuxt-module
nuxt-feature-toggle
The nuxt feature toggle module
Stars: ✭ 78 (+271.43%)
Mutual labels:  nuxt, nuxt-module
Auth Module
auth.nuxtjs.org
Stars: ✭ 1,624 (+7633.33%)
Mutual labels:  nuxt, nuxt-module
View All Similar Projects ➔

nuxt-svg-sprite-module

A quick and dirty way to inline svg sprites in your Nuxt app.

Install

$ yarn add nuxt-svg-sprite-module

$ npm install nuxt-svg-sprite-module --save

Configure

In nuxt.config.js

modules: [
  [
    "nuxt-svg-sprite-module",
    {
      directory: "~/assets/icons",
      // Optional template location: defaults to __dirname + /app.html
      templateLocation: "src/app.html",
      options: {
        // Configuration options:
        // https://github.com/jkphl/svg-sprite#configuration-basics
      },
    },
  ],
];

Usage

This module finds svgs in your specified directory and inlines them in Nuxt's app template. You can pass svg-sprite options to be merged with the the default configuration options.

By default, icons are prefixed with the word icon.

<svg>
  <use xlink:href="#icon-foo"></use>
</svg>

In order to tell this module where to inline your sprite you need to include a comment within your app.html file. Idealy this comment would proceed the opening <body> tag. If an app.html file does not exist, one will be generated in its absence.

<!-- svg-sprite -->

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue

Author

Gaven Heim

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].