aharris/webpack-inline-svg-plugin

Plugin does not work when 'inline-svg' attribute is broken out to new line.

JohnBlazek opened this issue · 2 comments

If I have an image tag with many attributes and need to break them out individually to new lines, If I break inline-svg to a new line, the plugin will not work and it will throw a 404 on the image.

This does not work:

       <img 
            inline-svg
            class="bhf-tile-radio-icon bhf-tile-radio-icon-selected"
            src="/content/dam/bhf/admin/tools/digital-wholesaling/assets/icons/piggy-bank.svg"
            alt="{{option.text | i18nString}}"
            aria-hidden="true">

This does:

      <img inline-svg
            class="bhf-tile-radio-icon bhf-tile-radio-icon-selected"
            src="/content/dam/bhf/admin/tools/digital-wholesaling/assets/icons/piggy-bank.svg"
            alt="{{option.text | i18nString}}"
            aria-hidden="true">

Able to reproduce and looking into it now. Basically angular adds line breaks and the regex is not accounting for this.

Current regex:

/<img\s[^>]*?src\s*=\s*['\\"]([^'\"]*?)['\"][^>]*?>/g;

This matches for a single line output:

<img inline-svg src=\"../../demo/assets/img/headers/onboard-expense-account-contract.svg\">

When broken onto multiple lines the outputted string is:

<img\n            inline-svg src=\"../../demo/assets/img/headers/onboard-expense-account-contract.svg\">

this does not match due to the line break \n. Looking into a better regex or matching pattern.

Feel free to provide solutions.

Issue resolved with release 1.1.4.