[GH-ISSUE #651] Loading flag-icon-css with svg-url-loader fails #354

New issue

Closed

opened 2026-03-03 14:37:46 +03:00 by kerem · 3 comments

kerem commented

2026-03-03 14:37:46 +03:00

Owner

Originally created by @lindgr3n on GitHub (Dec 5, 2019).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/651

Hi!
Not sure if this is a bug with the bo.svg or if it is a bug in svg-url-loader (v3.0.3).

Setup

Im importing the css and using a webpack loader to handle the svg files.

Webpack config

 module: {
    rules: [
    {
        test: /\.svg/,
        use: {
          loader: "svg-url-loader",
          options: {}
        }
     }
]}

Then inside my component I am using import "flag-icon-css/css/flag-icon.css"

Error

Running the build results in

(node:13296) UnhandledPromiseRejectionWarning: Error: postcss-svgo: Error in parsing SVG: No whitespace between attributes
Line: 0
Column: 84846
Char: L
    at promises.push.getSvgo.optimize.then.catch.error (\node_modules\postcss-svgo\dist\index.js:95:19)

Problem

Found the problem in flags/1x1/bo.svg on line 491 (Same in the 4x3 variant)

And to be more specific
-inkscape-font-specification:'Linux Biolinum Bold'

Solution

Not sure if this is the solution but if i remove the single quote (') the build works.
-inkscape-font-specification:Linux Biolinum Bold

Is it correct to remove it?

Originally created by @lindgr3n on GitHub (Dec 5, 2019). Original GitHub issue: https://github.com/lipis/flag-icons/issues/651 Hi! Not sure if this is a bug with the `bo.svg` or if it is a bug in `svg-url-loader` (v3.0.3). ## Setup Im importing the css and using a webpack loader to handle the svg files. Webpack config ``` module: { rules: [ { test: /\.svg/, use: { loader: "svg-url-loader", options: {} } } ]} ``` Then inside my component I am using `import "flag-icon-css/css/flag-icon.css"` ## Error Running the build results in ``` (node:13296) UnhandledPromiseRejectionWarning: Error: postcss-svgo: Error in parsing SVG: No whitespace between attributes Line: 0 Column: 84846 Char: L at promises.push.getSvgo.optimize.then.catch.error (\node_modules\postcss-svgo\dist\index.js:95:19) ``` ## Problem Found the problem in `flags/1x1/bo.svg` on line 491 (Same in the 4x3 variant) `<path font-size="100" style="line-height:125%;-inkscape-font-specification:'Linux Biolinum Bold';text-align:center" fill="#e8a30e" stroke="#000" stroke-width=".1" d="M227.5 249l1.4.8.3-.6c.2-.3.2-.5.1-.7 0-.2-.2-.4-.5-.5-.3-.2-.6-.3-.8-.2-.2 0-.3.2-.4.4l-.3.6c0 .1 0 .2.2.3m1.8 1l1.7.9h.3c.1 0 .3-.2.4-.5l.3-.6a.6.6 0 000-.5.8.8 0 00-.2-.2 2 2 0 00-.4-.3c-.8-.4-1.4-.3-1.7.4l-.4.7m-2.8-.8a31.7 31.7 0 00.7-1.2c.1-.4.3-.7.6-.9l.6-.4h.9l.5.6.1.8c.3-.3.7-.5 1-.6a1.3 1.3 0 011 .1c.4.2.7.6.8 1 0 .6 0 1.2-.5 1.9a28 28 0 01-.8 1.4l-.3.7a12 12 0 00-1.5-1l-1.9-1a12.3 12.3 0 00-1.6-.7l.4-.7m9.5-11.5c-.8.6-.7 1.5.4 2.8.5.6 1 1 1.5 1 .5.2 1 0 1.4-.3.4-.3.6-.7.5-1.1a3.3 3.3 0 00-.8-1.6c-.6-.7-1.1-1.1-1.6-1.2-.5-.2-1 0-1.4.4m4-.2c.5.6.7 1.4.7 2.1a3 3 0 01-1.2 2 3.1 3.1 0 01-2.2.9 2.6 2.6 0 01-2-1 3 3 0 01-.7-2.2 2.9 2.9 0 011.1-2 3.1 3.1 0 012.3-1c.7.1 1.4.5 2 1.2m8.5-2.8l.3 1a15.2 15.2 0 002-.7l.4-.1a5.3 5.3 0 00.3.9l-.6.1-2.5.7-.7.2-.4-1.7-.6-2a15 15 0 00-.5-1.7l.6-.2.7-.2.4 1.7.6 2m9.8-3l.1-1.8h.8l.7.1-.3 1.8-.2 2-.1 1.8a12 12 0 00-.7 0h-.8v-.1l.3-1.7.2-2.2m10.5 5.6a38.2 38.2 0 003.4-2.8l.4.2.4.2-5 3.8-.5-.3a292.6 292.6 0 01.5-4.7 28.2 28.2 0 00.1-1.4 7.9 7.9 0 001.4.7 37.1 37.1 0 00-.6 4.3m9 4.1a13 13 0 001.2-1.2l.5.5.5.5-1.4 1.1-1.5 1.5-1.3 1.2a12.3 12.3 0 00-.5-.5l-.5-.5 1.4-1.1 1.6-1.5m5.3 10.7a46.2 46.2 0 001.4-1.5h-2a22.2 22.2 0 00.6 1.5m-1.2-1.5l-2 .2a2 2 0 00-.2-.4 2.8 2.8 0 00-.2-.4 326.8 326.8 0 006.2 0l.4.6a87.3 87.3 0 00-4.2 4.6l-.3-.7a5.7 5.7 0 00-.3-.6l1.5-1.4a35.3 35.3 0 00-1-1.9" font-family="Linux Biolinum" font-weight="700" letter-spacing="60" text-anchor="middle" word-spacing="0"/>` **And to be more specific** `-inkscape-font-specification:'Linux Biolinum Bold'` ## Solution Not sure if this is the solution but if i remove the single quote (') the build works. `-inkscape-font-specification:Linux Biolinum Bold` Is it correct to remove it?

kerem closed this issue

2026-03-03 14:37:46 +03:00

kerem commented

2026-03-03 14:37:47 +03:00

Author

Owner

@Findus23 commented on GitHub (Dec 6, 2019):

According to https://validator.w3.org/check this is a valid SVG argument, but I'm sure we can remove it as it doesn't do anything useful and might trip up more parsers.

@Findus23 commented on GitHub (Dec 6, 2019): According to https://validator.w3.org/check this is a valid SVG argument, but I'm sure we can remove it as it doesn't do anything useful and might trip up more parsers.

kerem commented

2026-03-03 14:37:47 +03:00

Author

Owner

@lipis commented on GitHub (Dec 6, 2019):

I'm open for PRs..

@lipis commented on GitHub (Dec 6, 2019): I'm open for PRs..

kerem commented

2026-03-03 14:37:47 +03:00

Author

Owner

@lindgr3n commented on GitHub (Dec 9, 2019):