svg-sprite-loader

svg-sprite-loader copied to clipboard

Question

What is the current behavior? SVG images come into build path in "export" format What is the expected behavior? SVG's in raw format included svgo's optimization

So question is how could i change webpack options, to get svgs in raw optimized format?

I don't understand your question, could you provide an example what you get and what you expect.

@kisenka of course. One of images used in sprite generation:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
    <title>Group 6</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="sprites" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-32.000000, -70.000000)">
        <g id="Page-1-Copy-13" transform="translate(32.000000, 70.000000)" fill="#F2931F">
            <g id="Group-6">
                <path d="M13.7021333,10.6873556 C14.0381333,11.0129111 14.2085778,11.4153556 14.2048,11.8900222 C14.1992444,12.5978 13.9756889,13.2275778 13.5308,13.7744667 C13.1961333,14.1860222 12.7448,14.3980222 12.2305778,14.4918 C11.6872444,14.5911333 11.1461333,14.5473556 10.6052444,14.4731333 C10.5154667,14.4609111 10.4263556,14.4440222 10.3372444,14.4282444 C10.1688,14.3982444 10.1470222,14.4086889 10.1054667,14.5718 C9.98857778,15.0300222 9.87546667,15.4893556 9.75946667,15.9478 C9.73902222,16.0282444 9.71213333,16.1071333 9.68302222,16.2040222 C9.29524444,16.1389111 8.93324444,16.0273556 8.54791111,15.9340222 C8.56391111,15.8395778 8.57191111,15.7638 8.58968889,15.6906889 C8.70235556,15.2313556 8.81791111,14.7726889 8.9308,14.3133556 C8.97057778,14.1518 8.96302222,14.1369111 8.80768889,14.0922444 C8.64591111,14.0458 8.4828,14.0033556 8.31902222,13.9638 C8.18502222,13.9313556 8.16146667,13.9440222 8.12702222,14.0789111 C8.00835556,14.5433556 7.89346667,15.0084667 7.77657778,15.4731333 C7.75924444,15.5418 7.73835556,15.6093556 7.71391111,15.6960222 C7.6548,15.6933556 7.59724444,15.6995778 7.54413333,15.6871333 C7.27946667,15.6240222 7.01524444,15.5580222 6.75191111,15.4893556 C6.56613333,15.4409111 6.55746667,15.4244667 6.60524444,15.2300222 C6.71991111,14.7642444 6.8368,14.2991333 6.95168889,13.8333556 C6.96835556,13.7658 6.97857778,13.6969111 6.99546667,13.6095778 C6.26213333,13.4229111 5.54391111,13.2402444 4.80702222,13.0524667 C4.8368,12.9649111 4.85302222,12.9038 4.87768889,12.8462444 C5.01346667,12.5304667 5.15035556,12.2151333 5.2888,11.9004667 C5.35857778,11.7420222 5.36591111,11.7389111 5.53991111,11.7802444 C5.71013333,11.8206889 5.87968889,11.8644667 6.04946667,11.9064667 C6.08724444,11.9158 6.12502222,11.9258 6.16324444,11.9313556 C6.46768889,11.9758 6.59902222,11.8958 6.67613333,11.5960222 C6.82302222,11.0246889 6.96124444,10.4513556 7.10368889,9.87891111 C7.34791111,8.8978 7.59257778,7.91668889 7.83702222,6.93557778 C7.84657778,6.8978 7.85813333,6.86046667 7.86368889,6.82224444 C7.91102222,6.50602222 7.78924444,6.29602222 7.48013333,6.19135556 C7.29657778,6.12913333 7.10546667,6.08891111 6.91791111,6.03868889 C6.81257778,6.01046667 6.70746667,5.9818 6.5808,5.94757778 C6.66057778,5.52957778 6.76502222,5.13491111 6.88213333,4.72068889 C7.62791111,4.90513333 8.34813333,5.08335556 9.0868,5.26602222 C9.16257778,4.96891111 9.23346667,4.69468889 9.30257778,4.42002222 C9.36924444,4.15624444 9.43191111,3.8918 9.5008,3.62868889 C9.54035556,3.47735556 9.5588,3.46957778 9.72302222,3.50868889 C9.97502222,3.56891111 10.2270222,3.6298 10.4783556,3.69268889 C10.6930222,3.74646667 10.7014667,3.75913333 10.6494667,3.97002222 C10.5439111,4.39802222 10.4356889,4.82535556 10.3292444,5.25291111 C10.3105778,5.3278 10.2941333,5.40335556 10.2723556,5.49668889 C10.5212444,5.60713333 10.7854667,5.62868889 11.0585778,5.70713333 C11.0861333,5.62513333 11.1148,5.5558 11.1330222,5.4838 C11.2405778,5.05646667 11.3450222,4.62824444 11.4525778,4.20068889 C11.4710222,4.12713333 11.4988,4.05602222 11.5303556,3.95913333 C11.9090222,4.05224444 12.2714667,4.14157778 12.6541333,4.23557778 C12.6414667,4.32446667 12.6370222,4.3998 12.6194667,4.47202222 C12.5108,4.91891111 12.3988,5.36513333 12.2890222,5.8118 C12.2303556,6.05091111 12.2312444,6.05091111 12.4708,6.14268889 C12.9150222,6.31268889 13.3414667,6.51557778 13.7132444,6.81802222 C14.0656889,7.10468889 14.3314667,7.45357778 14.4092444,7.91002222 C14.5385778,8.67157778 14.2910222,9.58002222 13.5974667,9.9978 C13.4485778,10.0875778 13.2836889,10.1502444 13.1299111,10.2238 C13.3221333,10.3778 13.5268,10.5173556 13.7021333,10.6873556 M10.3165778,0.0544666667 C4.78124444,-0.134866667 0.120577778,4.16691111 0.00235555556,9.82202222 C-0.115422222,15.4484667 4.35546667,19.9044667 9.81213333,19.9984667 C15.3045778,20.0931333 19.9512444,15.6780222 19.9505778,10.0333556 C19.9756889,4.78891111 15.8483556,0.2438 10.3165778,0.0544666667" id="Fill-4"></path>
            </g>
        </g>
    </g>
</svg>

after sprite generating, i'm getting in build directory svg image in js export format:

export default {
      id: "bitcoin-usage",
      viewBox: "0 0 20 20",
      url: __webpack_public_path__ + "/code/exchange/web/markup/svgs/bitcoin.svg",
      toString: function () {
        return this.url;
      }
    }

but im expecting to get in result optimized image:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
  <path fill="#F2931F" fill-rule="evenodd" d="M13.7 10.7c.3.3.5.7.5 1.2a3 3 0 0 1-.7 1.9 2 2 0 0 1-1.3.7h-1.6-.3c-.1-.1-.2 0-.2 0L9.8 16l-.1.3-1.2-.3v-.2l.4-1.4v-.2l-.6-.1h-.2l-.3 1.5v.2h-.3l-.7-.2c-.2 0-.2 0-.2-.3l.4-1.4v-.2l-2.2-.5v-.3a122.7 122.7 0 0 1 .7-1l.5.1h.2c.3 0 .4 0 .5-.3L7 9.9l.7-3c.1-.4 0-.6-.3-.7L6.9 6h-.3c0-.5.2-.9.3-1.3l2.2.6.2-.9.2-.8c0-.1 0-.1.2 0a73.3 73.3 0 0 1 1 .4l-.4 1.3v.2l.8.2v-.2l.4-1.3V4l1.2.2v.3l-.4 1.3c0 .3 0 .3.2.3l1.2.7c.4.3.6.7.7 1.1.1.8-.1 1.7-.8 2.1l-.5.2.6.5M10.3 0A10 10 0 1 0 20 10a10 10 0 0 0-9.6-10"/>
</svg>

На русском: Пишу, чтоб не было недопонимания. Суть в том, что в build директории, помимо самого спрайта появляются еще и обычные свг`шки, но они в "эспорт"-формате для js. Можно какой-то настройкой сделать так, чтоб и они туда выкатывались в виде обычного svg?

Do you read the docs about extract mode?

if i set extract: false, i've got:

import SpriteSymbol from "svg-baker-runtime/browser-symbol";
import sprite from "svg-sprite-loader/runtime/browser-sprite.build";
var symbol = new SpriteSymbol({
  "id": "advcash-bw",
  "use": "advcash-bw-usage",
  "viewBox": "0 0 23 19",
  "content": "<symbol viewBox=\"0 0 23 19\" id=\"advcash-bw\"><defs><path id=\"advcash-bw_a\" d=\"M0 0h23v19H0z\" /><path id=\"advcash-bw_b\" d=\"M.1 0h12v19H.1z\" /></defs><g fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(8.333)\"><mask id=\"advcash-bw_c\" fill=\"#fff\"><use xlink:href=\"#advcash-bw_b\" /></mask><path d=\"M9.67 13.68l2.43 5.3c-1.1 0-2.1-.02-3.08.02-.55.02-.69-.31-.86-.7-.67-1.52-1.36-3.01-2.04-4.52-.3-.93-.69-1.82-1.16-2.68a5.72 5.72 0 0 0-.71-1.65c-.81-2.51-.81-2.5-3.4-2.56-.27 0-.53-.06-.79-.1L3.12.05l3.32 6.82c.38.9.74 1.82 1.3 2.64.08.62.44 1.12.75 1.63.29.9.72 1.73 1.18 2.55\" fill=\"#FFF\" mask=\"url(#advcash-bw_c)\" /></g><path d=\"M8.41 6.8c.26.03.52.09.78.1 2.59.04 2.59.04 3.4 2.54l-2.2.06-3.3-.01c-1.29-.01-2.6-.1-3.88-.01-.95.07-1.58-.2-2.06-1C.85 8 .47 7.56 0 6.92h7.29c.37 0 .76.07 1.12-.11M13.34 11.14c.47.87.87 1.77 1.16 2.7l-5.9.08-3.44-.05-2-2.71h3.32l3.38-.02h3.48\" fill=\"#FFF\" /><path d=\"M5.15 13.84l3.43.05-1.9 4.54c-.15.4-.37.59-.84.57-.95-.04-1.9-.01-3-.01l2.31-5.15M16.13 9.5c-.56-.81-.92-1.72-1.3-2.62H23c-.55.78-1.05 1.45-1.52 2.15-.25.38-.6.4-.99.4l-4.36.07M9.86 11.12l-3.36.02.64-1.64 3.28.01-.56 1.6M18.01 13.68c-.46-.82-.9-1.65-1.18-2.54h3.09l-1.9 2.54\" fill=\"#FFF\" /></g></symbol>"
});
var result = sprite.add(symbol);
export default symbol

Could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

@kisenka try this one https://github.com/aLkRicha/svg-sprite-loader_issue

@kisenka ping

Don't use file-loader after svg-sprite-loader

@kricha does my comment fixes your issue? :)

@kisenka Latest configuration is:

config.module.rules.push({
    test: /\.svg$/,
    include: path.resolve(__dirname, 'web/markup/images'),
    use: [
        {
            loader: 'svgo-loader',
            options: svgoOptions
        },
    ],
});
config.module.rules.push({
    test: /\.(png|jpg|jpeg|gif|ico|webp|svg)$/,
    exclude: [path.resolve(__dirname, 'web/markup/images')],
    loader: 'file-loader',
    options: { name: 'images/[name].[hash:8].[ext]', publicPath: '/build/' }
});
config.module.rules.push({
    test: /\.svg$/,
    include: path.resolve(__dirname, 'web/markup/svgs'),
    use: [
        {
            loader: 'svg-sprite-loader',
            options: {
                extract: false,
            }
        },
        {
            loader: 'svgo-loader',
            options: svgoOptions
        },
    ],
});

This works without any warnings, but it doesn't create sprite.svg file.

If I change extract to true, it produces a lot warnings, but creates sprite.svg file... And single svg files contain something like this:

export default {
      id: "advcash-usage",
      viewBox: "0 0 23 19",
      url: __webpack_public_path__ + "/code/exchange/web/markup/svgs/advcash.svg",
      toString: function () {
        return this.url;
      }
    }

😞

@kisenka ping