vue-svg-loader icon indicating copy to clipboard operation
vue-svg-loader copied to clipboard

[email protected] contains 115 MiB of vue-cli

Open simon04 opened this issue 4 years ago • 8 comments
trafficstars

The npm package [email protected] contains 115 MiB of vue-cli – https://unpkg.com/browse/[email protected]/

Please re-package in a clean environment.

simon04 avatar Dec 10 '20 11:12 simon04

Is this being looked into?

Raademar avatar Feb 08 '21 10:02 Raademar

I gave up waiting and replaced vue-svg-loader with a minimalistic loader stored in the project itself:

// vue-svg-loader.js
module.exports = function VueSvgLoader(svg) {
  this.cacheable();
  return `<template>${svg}</template>`;
};

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module.rule("svg").uses.clear();
    config.module
      .rule("svg")
      .use("vue-loader")
      .loader("vue-loader")
      .end()
      .use("./vue-svg-loader")
      .loader("./vue-svg-loader");
  },
};

simon04 avatar Feb 09 '21 11:02 simon04

This solution worked fine for me

Raademar avatar Feb 12 '21 22:02 Raademar

I gave up waiting and replaced vue-svg-loader with a minimalistic loader stored in the project itself:

// vue-svg-loader.js
module.exports = function VueSvgLoader(svg) {
  this.cacheable();
  return `<template>${svg}</template>`;
};

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module.rule("svg").uses.clear();
    config.module
      .rule("svg")
      .use("vue-loader")
      .loader("vue-loader")
      .end()
      .use("./vue-svg-loader")
      .loader("./vue-svg-loader");
  },
};

@simon04 You don't seem to optimize your svg code with svgo like vue-svg-loader would do.

pmrotule avatar Apr 27 '21 09:04 pmrotule

@pmrotule, you're right. My use-case was to load bootstrap-icons. Thus, using svgo seemed unnecessary.

simon04 avatar Apr 27 '21 12:04 simon04

Here is code with svgo 2.2.

// vue-svg-loader.js
const { optimize } = require('svgo');

module.exports = async function (svg) {
	this.cacheable();

	const svgo = new SVGO(svgoConfig);

	({ data: svg } = await svgo.optimize(svg, {
		path: this.resourcePath,
	}));

	return `<template>${svg}</template>`;
};

vpillinger avatar Nov 10 '21 03:11 vpillinger

As an alternative, if you only use vue2, you can switch to version 0.17-beta.0.

jzymx50 avatar Nov 27 '21 02:11 jzymx50

Here is code with svgo 2.2.

// vue-svg-loader.js
const { optimize } = require('svgo');

module.exports = async function (svg) {
	this.cacheable();

	const svgo = new SVGO(svgoConfig);

	({ data: svg } = await svgo.optimize(svg, {
		path: this.resourcePath,
	}));

	return `<template>${svg}</template>`;
};

Unfortunately it seems doesn't work with svgo 3 :(

rdhainaut avatar Nov 09 '22 18:11 rdhainaut