Create SVG sprite build process within the VUE branche (webpack?)

[mvaneijgen]

A build process for importing all the SVG files used on the site within the SvgContainer.vue file and have the ID be the file name of the SVG, like so <svg id="{{filename}}>....</svg>.

Because we're using Webpack it would be nice to implement it within this.

[mvaneijgen]

Cleaned up SVG files and put them in /src/assets/svg/... see PR https://github.com/pebble-dev/The-Panic-Store/pull/58

[sGerli]

How's the progress on this?

[Zetaphor]

No movement yet, been absent for holidays. Will look into this in the coming week.

[Zetaphor]

After multiple failed attempts, I'm throwing my hands in the air 😭

Having a hell of a time getting this running as my webpack-fu is weak. Since we've got SVG's working inline with external references, I see this as a "nice to have". Going to mark help-wanted and on-hold until one of us either has time to give it another go, or has a breakthrough.

[mvaneijgen]

@Zetaphor would it be weird to run grunt with webpack?

[MHC03]

Hi guys, this seems a bit old, but I was thinking about a solution for this when browsing through the project. I am not sure, if I have understood it right, but you want to directly load the svgs to the SvgContainer.vue through the webpack generated links? And the svgs should already have the id attribute with their respective name, something like that?

I am not sure, if following works and I have not looked too deep into the project to know how to directly try it out. Nonetheless, I will describe my possible solution, it may work:

You need to install 2 packages for it to theoretically work: image-loader and an inline-svg-plugin for webpack. After that, through the former package you have to edit your webpack conf like following:

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          use: [
        'file-loader',
         {
            loader: 'image-webpack-loader',
            options: {
                svgo: {
                   addAttributesToSVGElement: {
                       id: [name]
                   }
                },
             },
         },
        ],,
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        },
      }

You will see examples for this in the image-loader package.

With the inline-svg-plugin we will load the svg files into the SvgContainer.vue file. First add the plugins to the webpack config:

plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackInlineSVGPlugin()
]

And than you can easily include the pure svg string like an img into <template></template>:

<img inline src="img/name.hash.svg">  <!-- Or whatever the links of the svgs are -->

Every step is purely from the documentation of all above mentioned packages. I have no clue whether this will work, but maybe someone wants to try out (This someone may also be me ^^).