svg-sprite / grunt-svg-sprite

SVG sprites & stacks galore — Grunt plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

Home Page:https://github.com/svg-sprite/svg-sprite

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Generated icons class names are wrong (on windows)

benbracha opened this issue · comments

Hello,

We recently encountered an issue where the generated selectors are wrong - in case of having the icon name, they contains icon path.

We work with:

grunt-svg-sprite: 1.1.2
svg-sprite: 1.1.2

(updating to latest, didn't solve the issue..).

For example:
We used to get the generated selectors to be:

ui-icon-checkbox-editable-chosen

And now we get:

ui-icon-src\assets\images\svg-icons\checkbox-editable-chosen

Our grunt settings are:

serve: {
                src: ['src/assets/images/svg-icons/*.svg'],
                dest: '.',
                options: {
                    mode: {
                        css: {
                            dest: '.tmp/app',
                            sprite: 'sprite.svg',
                            bust: false,
                            prefix: '.ui-icon-',
                            render: {
                                scss: {
                                    dest: '_svg-sprite',
                                    template: 'svg_sprite_dev_template.scss'
                                }
                            },
                            variables: {
                                placeholder: 'ui-icon'
                            }
                        }
                    }
                }
            },

And the dev template:

%{{placeholder}} {
    background: url({{{sprite}}}) no-repeat;
}

{{#shapes}}{{#selector.shape}}{{expression}}{{^last}},
{{/last}}{{/selector.shape}} {
    @extend %{{placeholder}};
    background-position: {{position.relative.xy}};{{#dimensions.inline}}
    width: {{width.outer}}px;
    height: {{height.outer}}px;{{/dimensions.inline}}
}{{#dimensions.extra}}

{{#selector.dimensions}}{{expression}}{{^last}},
{{/last}}{{/selector.dimensions}} {
    width: {{width.outer}}px;
    height: {{height.outer}}px;
}{{/dimensions.extra}}

{{/shapes}}

Any idea?

Hi @benbracha,

first of all sorry for not getting back to you earlier.

I suspect you got hit by the broken cwd support that was tackled with issue #32. Please try to change your config like this:

serve: {
  expand      : true,
  cwd         : 'src/assets/images/svg-icons',
  src         : ['**/*.svg'],
  dest        : '.',
  options     : {
      /* ... */
  }
}

and please let me know if this works for you.

Cheers,
Joschi

@benbracha Any updates on this?

I'll close this one for now due to inactivity. Please feel free to ping me in case you've still got problems with it.