How do we use svg icons with this plugin?

[mybardaklar]

Hi, its an amazing plugin!

But i have a question. How can i use svg icons with this plugin? There is no information in documents about this. For example i was using posthtml-inline-svg with posthtml-loader. But with this plugin i cannot use posthtml-loader. With posthtml-inline-svg, i can use some svg attrs like witdh, height, fill and other attrs. But how am i gonna use kind of things with this plugin ?

Thank you.

[webdiscus]

Hi @mybardaklar,

you can see the usage examples on demo site hello-world and their sources.

Pug plugin add all SVG-image attributes to inline SVG-tag:

img.logo(src=require('logo-image.svg') with=100 height=200)

Generated HTML

<svg viewBox="0 0 200 200" class="logo" with=100 height=200>
  <path d="m600 0 530.3 300v600l-530.3 300-530.3-300v-600z" fill="#fff"></path>
  ...
</svg>

Pug plugin can inline SVG/PNG/JPG/etc using Webpack option parser.dataUrlCondition.maxSize for type: 'asset' or using a query, e.g. image.svg?inline, in this case must be added follow rule:

   // force inline images containing `?inline` query
    {
      test: /\.(png|svg)$/i,
      type: 'asset/inline',
      resourceQuery: /inline/,
    },

See please other usage examples webpack-pug-scss-js-starter

Note

Pug plugin not require additional plugins for inline SVG.

[mybardaklar]

Thank you so much. I already used RegExp for include rule. But what if i have more subfolders? That is a problem i think.

[webdiscus]

for example?

[mybardaklar]

"src/fonts/ParentFolder/SubFolder/...fontfiles" like this.

[webdiscus]

you can self write a logic in filename function for your folder structure.
See please Webpack docu for filename.
This case has nothing to do with Pug plugin ;-)

[mybardaklar]

Yes, you are right. Sorry. Thank you for these informations.