swisnl/laravel-mix-svg-sprite

SVG sprite component for Laravel Mix

laravel-mix-svg-sprite's Issues

Extract mode for SCSS file, when processUrls is false.

Detailed description

Extract mode for scss file is working when mix.options({ processCssUrls: true }). But it is not working when setting the processCssUrls is false.

Context

Would like to use relative url on my css.

Your environment

Include as many relevant details about the environment you experienced the bug in and how to reproduce it.

• Node 14.4.0
• Mac OSX 10.11.6

// assets/styles/main.scss
body {
	background-image: url(../sprites/email.svg);
}

// assets/scripts/main.js
/**
 * Requires all directives from subdirectories.
 * @param requireContext
 * @returns {*}
 */
function requireAll(requireContext) {
	return requireContext.keys().map(requireContext);
}

// Require all icons in the sprites folder.
requireAll(require.context('../../sprites', true, /\.svg$/))

// webpack.mix.js
mix
	.options({ processCssUrls: false, })
	.sass('assets/styles/main.scss', 'styles')
	.js('assets/scripts/main.js', 'scripts')
	.svgSprite('assets/sprites', 'sprite.svg')
;

Sprite is created but extracted asset urls are transformed to system path instead of relative with hash id

Detailed description

When compiling with option of extract true; the expectation is that the compiled css asset urls for sprite assets resolve as the sprite file with sprite fragments identifiers for such file. Instead the a system path to the file is what is injected.

The expectations relates to https://github.com/JetBrains/svg-sprite-loader/tree/master/examples/extract-mode

From the above link documentation

Input (main.css)

.logo {background: url('./logo.svg')}

Output (dist/main.css)

.logo {background: url('sprite.svg#logo-usage')}

Instead the result of compiling is the following:

Input (assets/app.scss)

.test {
    background-image: url('./badge-steam.svg');
}

Output (dist/styles/app.css)

.test {
  background-image: url(//home/user/localsites/site/app/public/wp-content/themes/test/assets/badge-steam.svg);
}

Expected Output (dist/styles/app.css)

.test {
  background-image: url(./sprite.svg#badge-steam);
}

Note when svgSprite is commented out, paths resolve as relative paths instead of system paths.

Configuration

const mix = require("laravel-mix");
require("laravel-mix-svg-sprite");

/**
 * @see https://laravel-mix.com/docs/6.0/api
 * @see https://laravel-mix.com/extensions/svg-sprite
 * @see https://github.com/JetBrains/svg-sprite-loader/tree/master/examples/extract-mode
 */
mix
  .options({
    watchOptions: {
      ignored: /node_modules/,
    },
    processCssUrls: true,
    useRelativePaths: true,
    publicPath: "dist",
  })
  .sass("assets/styles/app.scss", "styles")
  .svgSprite("assets/svgs", "svg/sprite.svg", {
    extract: true,
  });

Screenshot

source

test.zip

Env Info

node v16.9.0
npm 7.22.0
OS Arch Linux x86_64
Kernel 5.13.13-arch-1-1

Example please

Hello, can you write an example please.
I wanted to inline my all SVG files but I couldn't
I want to use it in sass and html also)
I read that this package doesn't blob my folder and include all files but I don't understand how to do it.
Small example will help me and other guys.
Thanks in advance!

SVG not generated

I tried to implement this package into my Laravel project, however, my svg sprite sheet is not being generated.

webpack.mix.js

let mix = require('laravel-mix');
require('laravel-mix-svg-sprite');

mix.js( 'resources/js/app.js', 'public/js' )
    .sass( 'resources/sass/app.scss', 'public/css' )
    .svgSprite(
        'resources/sprite',
        'public/sprite.svg',
    )
    .copyDirectory( 'resources/fonts', 'public/fonts' );

Contents of my package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "aos": "^2.3.4",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "jquery": "^3.6.0",
        "laravel-echo": "^1.11.0",
        "laravel-mix": "^5.0.1",
        "laravel-mix-svg-sprite": "^2.0.0",
        "lodash": "^4.17.13",
        "magnific-popup": "^1.1.0",
        "pusher-js": "^7.0.3",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "svg-spritemap-webpack-plugin": "^4.2.0",
        "vue-template-compiler": "^2.6.14"
    },
    "dependencies": {
        "@pusher/push-notifications-web": "^1.1.0",
        "chart.js": "^3.5.0",
        "puppeteer": "^5.5.0",
        "vue": "^2.6.14"
    }
}

When I run npm run watch or npm run dev next, nothing seems to be happening.

Am I missing any necessary steps?

The svg file is not created when using an alias for the directory containing your SVG files

Detailed description

Hello guys. I need your input please. The problem is that the svg file is not created.
Βelow you will see what I have done.
I would be grateful for any help.

webpack.config.js

module.exports = {
    resolve: {
        alias: {
            '@createSvg': path.resolve(__dirname, './resources/img/icons')
        }
    }
};

webpack.mix.js

require('laravel-mix-svg-sprite');

Config.svgSprite = {
    loaderOptions: {
        extract: true
    },
    pluginOptions: {
        plainSprite: true
    }
};

mix.js('resources/js/index.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .svgSprite(
        '@createSvg',
        'public/img/sprite.svg'
    )
    .extract();

index.js (my app.js file)

function requireAll(r) {
    r.keys().forEach(r);
}

requireAll(require.context('@createSvg', true, /\.svg$/));

Your environment

• Version used (e.g. Node 10 and Laravel Mix 5.0.1):
• Operating system and version Windows 10:

The plugin does not generate sprite

Description

I have a folder which contains svg-icons.
I try to generate sprite but nothing happens, mix completes and no sprite has been generated in dist folder.

const mix = require('laravel-mix');
require('laravel-mix-svg-sprite');

mix.svgSprite(
    'resources/assets/svg', 
    'public/dist/front/sprite.svg',
    {
        extract: true
    },
    {
        plainSprite: true
    }
);

As I think the problem refers to this notice in plugin description

N.B. This component only adds a loader to the Webpack configuration, it doesn't glob your directory and include every file it finds. You need to require the icons from within your code (JS, CSS, etc.) just like other modules to have them added to the sprite!

But I dont know what I have to do with this.

Bug : Mix reload on a vue.js SPA doesn't load the icons

Detailed description

I'm trying to do a project in Laravel coupling VueJS as an SPA and using your library, but something weird occur :

When i first run mix with browserSync, the website shows itself perfectly with all icons as svg, but when a change of code occurs, the website "hot reload" and all the icons generated by the library disappear !

And the same error occur when you open the website twice, the first tab could be perfect but the new one won't have any svg generated.

• Version used (e.g. Node 10 and Laravel Mix 4.0):

"laravel-mix": "^4.1.2", "laravel-mix-svg-sprite": "^1.0.0", "svg-spritemap-webpack-plugin": "^3.4.0", "svg4everybody": "^2.1.9", "vue": "^2.6.10", "vuex": "^3.1.1",

• Operating system and version (e.g. Ubuntu 16.04, Windows 10):

Mac OS

• Link to your project or minimal working example:

Webpack : https://gist.github.com/Epistol/127330e1e31fdd37b441b1dbd22025be

The SPA router of VueJS : https://gist.github.com/Epistol/227e8d55ff07a5ed898ba3f4bab6800f

app.js : https://gist.github.com/Epistol/d8eae61ee32ef49031574c13fd37ebce

And an exemple loading svg of my vue component page :

<svg class="fill-current w-full h-full">
                                <use xlink:href="/svg/sprite.svg#help"/>
                            </svg>

Is it possible to remove 'fill' attributes from the svg?

I believe this is possible with svgo but I'm not sure how to extend or change the config.

Creating multiple sprites does not work

Detailed description

It is not possible to create multiple sprites. Only the last sprite is created.

Context

I want to create multiple sprites.

Possible implementation

Some fix is needed in the register function of the plugin to allow multiple sprites.