Developmint / Nuxt Svg Loader
Licence: mit
SVGs as components, also on the server side!
Stars: ✭ 125
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Nuxt Svg Loader
Svg Sprite Module
Optimize SVG files and combine them into sprite
Stars: ✭ 187 (+49.6%)
Mutual labels: nuxtjs, svg
Nuxt Optimized Images
🌅🚀 Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).
Stars: ✭ 717 (+473.6%)
Mutual labels: nuxtjs, svg
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-16%)
Mutual labels: nuxtjs, svg
React Native Svg Animations
SVG Animations wrapper for react-native.
Stars: ✭ 117 (-6.4%)
Mutual labels: svg
Geojson2svg
Converts geojson to svg string given svg viewport size and maps extent.
Stars: ✭ 117 (-6.4%)
Mutual labels: svg
Xsound
Web Audio API Library for Synthesizer, Effects, Visualization, Multi-Track Recording, Audio Streaming, Visual Audio Sprite ...
Stars: ✭ 123 (-1.6%)
Mutual labels: svg
Tabler Icons
A set of over 1400 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Stars: ✭ 10,858 (+8586.4%)
Mutual labels: svg
Vue Calendar Heatmap
A lightweight calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph
Stars: ✭ 120 (-4%)
Mutual labels: svg
Nuxt Dev To Clone
Build DEV.TO clone with Nuxt.js and new `fetch` hook
Stars: ✭ 118 (-5.6%)
Mutual labels: nuxtjs
Blazor.diagrams
A fully customizable and extensible all-purpose diagrams library for Blazor
Stars: ✭ 119 (-4.8%)
Mutual labels: svg
Svg Sprite
SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)
Stars: ✭ 1,648 (+1218.4%)
Mutual labels: svg
Teenyicons
Tiny minimal 1px icons designed to fit in the smallest places.
Stars: ✭ 1,631 (+1204.8%)
Mutual labels: svg
Mrefresh
This pod enables you to add pull-to-refresh mechanism to your scrollviews and tableviews and use svg patterns in your refreshing view's layers.
Stars: ✭ 123 (-1.6%)
Mutual labels: svg
Apexcharts.js
📊 Interactive JavaScript Charts built on SVG
Stars: ✭ 10,991 (+8692.8%)
Mutual labels: svg
Facesjs
A JavaScript library for generating vector-based cartoon faces
Stars: ✭ 119 (-4.8%)
Mutual labels: svg
Nuxt SVG Loader - SVGs as components, also on the server side!
Features
- Full support of SVGs as components. Import them like your Vue SFCs
- Use Vue bindings as you'd do it with normal components
- Built on top of svg-to-vue-component
- Nuxt 2 (and only Nuxt 2) support
- Fully tested!
Demo
A live demo is available through the CodeSandBox of the repo.
Setup
- Add
nuxt-svg-loader
as a dependency using yarn or npm to your project - Add
nuxt-svg-loader
tomodules
section ofnuxt.config.js
{
modules: [
'nuxt-svg-loader',
]
}
- Now you can use your svg files like regular Vue components
- You can use inline svg as well by adding
?inline
at the end of the file path
<template>
<nav>
<a href="https://github.com/vuejs/vue">
<VueLogo />
Vue
</a>
<a href="https://github.com/svg/svgo">
<SVGOLogo />
SVGO
</a>
<a href="https://github.com/webpack/webpack">
<WebpackLogo />
webpack
</a>
<!-- Inline svg -->
<a class="with-background-svg" href="https://github.com/webpack/webpack">
webpack
</a>
<a href="https://github.com/webpack/webpack">
<img src="../components/NuxtTwo.svg?inline">
webpack>
</a>
</nav>
</template>
<script>
import VueLogo from '@/assets/svg/vue.svg';
import SVGOLogo from '@/assets/svg/svgo.svg';
import WebpackLogo from '@/assets/svg/webpack.svg';
export default {
name: 'Example',
components: {
VueLogo,
SVGOLogo,
WebpackLogo,
}
};
</script>
<style>
.with-background-svg {
background: url('@/assets/svg/vue.svg?inline')
}
</style>
- No more options are needed. It'll simply work
Configuration
The plugin will work seamlessly out of the box. It will also include SVGO defaults to avoid collisions between your optimized SVG files!
If you want to configure the underlying loader (or SVGO), you can do that easily as well. (All options available here)
// file: nuxt.config.js
export default {
// ...
// Your loader options as svgLoader object
svgLoader: {
svgoConfig: {
plugins: [
{ prefixIds: false } // Disables prefixing for SVG IDs
]
}
}
}
Migrating from 0.x
- Update the deps (of course!)
- Rename
svgo
tosvgoConfig
- If you used id prefixing manually before, you can delete the config:
export default {
svgLoader: {
svgo: { //Rename to svgoConfig
plugins: [
{ prefixIds: true } // Delete that line (or the whole svgLoader object if you don't have any other configurations)
]
}
}
}
How to fix Eslint auto lint error
If you turn on Eslint on save by server, you should exclude .svg
files of eslint-loader
.
Example:
// nuxt.config.js
build: {
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)|(\.svg$)/ /* <--- here */
})
}
}
}
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Alexander Lichter
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].