visualfanatic / Vue Svg Loader
Licence: mit
🔨 webpack loader that lets you use SVG files as Vue components
Stars: ✭ 514
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Svg Loader
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-79.57%)
Mutual labels: webpack, nuxt, svg
Vueleaflet
Vue components for Leaflet maps
Stars: ✭ 177 (-65.56%)
Mutual labels: webpack, vue-components
Moment Module
Efficient Moment.js integration for Nuxt
Stars: ✭ 164 (-68.09%)
Mutual labels: webpack, nuxt
React Svg Inline
DEPRECATED, I recommend you the tool SVGR
Stars: ✭ 230 (-55.25%)
Mutual labels: webpack, svg
Terminal In React
👨💻 A component that renders a terminal
Stars: ✭ 1,939 (+277.24%)
Mutual labels: webpack, svg
React Sigma
Lightweight React library for drawing network graphs built on top of SigmaJS
Stars: ✭ 217 (-57.78%)
Mutual labels: webpack, svg
Tui
This is a high quanlity components library for VUE
Stars: ✭ 258 (-49.81%)
Mutual labels: webpack, vue-components
Frontend Boilerplates
Collection of Boilerplates with ES6, Vue, React, Nuxt, TypeScript, SCSS, Nodejs. Using good practices and file structures to inspire your real projects.
Stars: ✭ 269 (-47.67%)
Mutual labels: webpack, nuxt
Svg Sprite Loader
Webpack loader for creating SVG sprites.
Stars: ✭ 1,822 (+254.47%)
Mutual labels: webpack, svg
Svg Spritemap Webpack Plugin
SVG spritemap plugin for webpack
Stars: ✭ 160 (-68.87%)
Mutual labels: webpack, svg
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (-41.44%)
Mutual labels: webpack, vue-components
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+361.67%)
Mutual labels: webpack, vue-components
Cordovue
A sample Apache Cordova application using VueJS.
Stars: ✭ 66 (-87.16%)
Mutual labels: webpack, vue-components
Vue Cnodejs
基于vue.js重写Cnodejs.org社区的webapp
Stars: ✭ 3,065 (+496.3%)
Mutual labels: webpack, vue-components
vue-svg-loader
webpack loader that lets you use SVG files as Vue components
Installation
npm i -D [email protected]
yarn add --dev [email protected]
Basic configuration
webpack
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
use: [
'vue-loader',
'vue-svg-loader',
],
},
],
},
};
Vue CLI
module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('vue-loader')
.loader('vue-loader') // or `vue-loader-v16` if you are using a preview support of Vue 3 in Vue CLI
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
},
};
Nuxt.js (1.x / 2.x)
module.exports = {
build: {
extend: (config) => {
const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
svgRule.test = /\.(png|jpe?g|gif|webp)$/;
config.module.rules.push({
test: /\.svg$/,
use: [
'vue-loader',
'vue-svg-loader',
],
});
},
},
};
Example usage
<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>
</nav>
</template>
<script>
import VueLogo from './public/vue.svg';
import SVGOLogo from './public/svgo.svg';
import WebpackLogo from './public/webpack.svg';
export default {
name: 'Example',
components: {
VueLogo,
SVGOLogo,
WebpackLogo,
},
};
</script>
License
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].