JetBrains/svg-mixer

svg-transform-loader not decode URI component

witem opened this issue · 5 comments

witem commented

Hi,
In my svg transformed values not decoded after encoding by postcss-move-props-to-bg-image-query.

Input scss:

&:after {
  background: url('../../img/svg/icon-livechat.svg') center no-repeat;
  -svg-fill: #9fbe3b;
}

Result svg:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 15 13"><path fill="%239fbe3b" fill-rule="evenodd" d="M14.171 10.499c-.202.279-.34.786-.308 1.127l.1 1.043c.033.341-.164.447-.437.23
6l-.736-.569c-.273-.211-.77-.306-1.104-.211 0 0-.546.155-1.182.155-2.483 0-4.497-1.778-4.497-3.971s2.014-3.97 4.497-3.97c2.484 0 4.497 1.777 4.497 3.97 0 1.042-.83 2.19-.83 2.19zM4.464 8.445c0 .555.089 1.09.25 1.597-.444-.059-.617-.149-.
617-.149-.41-.12-1.076-.05-1.451.156l-1.274.698c-.375.206-.581.034-.458-.383l.335-1.135c.123-.416.021-1.047-.226-1.401 0 0-1.02-1.459-1.02-2.781C.003 2.261 2.476.004 5.526.004c2.202 0 4.097 1.179 4.984 2.882l-.041-.002c-3.247 0-6.005 2.4
95-6.005 5.561z" class="cls-1"/></svg>

fill="%239fbe3b" must be fill="#9fbe3b"

Env:

  • webpack: 4.16.5
  • svg-transform-loader: 1.2.0
  • postcss-move-props-to-bg-image-query: 0.2.3

Webpack config:

/* ******* */
module:                                                                                                                                                                                                                                    
   { rules:                                                                                                                                                                                                                                  
      [
        { test: /\.scss$/,
          use:
           [ { loader: '/home/shmuser/projects/dp/depositphotos2/webapp/node_modules/mini-css-extract-plugin/dist/loader.js' },
             { loader: 'css-loader' },
             { loader: 'postcss-loader',
               options:
                { config:
                   { path: '/home/shmuser/projects/dp/depositphotos2/webapp/config/postcss.config.js',
                     ctx: { isMinify: undefined } } } },
             { loader: 'resolve-url-loader', options: { keepQuery: true } },
             { loader: 'sass-loader', options: { sourceMap: true } } ] },
        { test: /^((?!flags).)*\.svg(\?.*)?$/,
          use:
           [ { loader: 'external-svg-sprite-loader',
               options:
                { name: '../_img/sprites/sprite.svg',
                  iconName: 'i-[name]-[hash:5]',
                  publicPath: '/_img/',
                  svgoOptions:
                   { plugins:
                      [ { inlineStyles: true },
                        { collapseGroups: true },
                        { convertPathData: true },
                        { convertStyleToAttrs: true },
                        { convertTransform: true },
                        { convertColors: { shorthex: false } },
                        { cleanupNumericValues: { floatPrecision: 2 } },
                        { minifyStyles: true },
                        { removeDesc: true },
                        { removeTitle: true },
                        { removeViewBox: false },
                        { removeDimensions: true },
                        { sortAttrs: true } ] } } },
             { loader: 'svg-transform-loader' } ] } ] },

/* ******* */
kisenka commented

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.

witem commented

Ok, I try

witem commented

Hi @kisenka
Sory for deplay, but I create minimal setup to demonstrate a problem: https://github.com/witem/svg-mixer-issue32

Resulted svg: https://raw.githubusercontent.com/witem/svg-mixer-issue32/master/build/sprite.svg

kisenka commented

@witem fixed in postcss-move-props-to-bg-image-query@0.2.5.

witem commented