Symbol mode not outputting css

[Ian Soper]

When using these mode settings the css file(s) for symbol mode do not get created. The view mode CSS/LESS/SCSS files do get created, however.

mode: {
  view: {
    render: {
      less: true,
      scss: true,
      css: true
    },
    example: true
  },
  symbol: {
    render: {
      less: true,
      scss: true,
      css: true
    },
    example: true
  }
},

[Joschi Kuphal]

Hi @iansoper,

the symbol mode generally doesn't create any CSS as this type of sprite is not suitable for being used via CSS (it's a "foreground image sprite" only). The <symbol> elements contained in the sprite are not rendered until you <use> them somewhere (inline) in your HTML.

Cheers,
Joschi

[Joschi Kuphal]

Ah, forgot to mention: For the above mentioned reason, the symbol mode also doesn't have a render option!

[Ian Soper]

That makes sense, thanks for clarifying.

[Andreas Wahlqvist]

But wouldn't you still need the dimensions in CSS? When using symbol output and creating an example, the generated HTML-file has the following comment:

Sprite shape dimensions
====================================================================================================
You will need to set the sprite shape dimensions via CSS when you use them as inline SVG, otherwise
they would become a huge 100% in size. You may use the following dimension classes for doing so.
They might well be outsourced to an external stylesheet of course.

And then some inline CSS with the dimensions of the SVG symbols, e.g.:

.svg-svg--logo-dims { width: 139px; height: 65px; }

Is it not possible to have this CSS output to a separate file?

[Joschi Kuphal]

Good point. Let me think about this. Will get back to you later.

[Joschi Kuphal]

I just pushed a new version out the door that supports creating a dimensions stylesheet along with non-CSS sprites (defs, symbol and stack mode). However, this is not really documented anywhere yet. Just use it as you would do with the CSS sprite types (css and view). Please let me know if you need further assistance.

[Oleg Khobotov]

@jkphl It looks like the mode.stack.dimensions doesn't work with value TRUE (as it is noticed in the documentation, but it should work now, doesn't it?)

[Joschi Kuphal]

@LostSenSS I can't confirm this. For me, a basic configuration like

var config = {
    mode: {
        stack: {
            dimensions: true,
            render: {
                css: true
            }
        \
    }
}

just works fine. Could you please post your full configuration?

[Oleg Khobotov]

@jkphl My configuration:

default: {
    options: {
        shape: {
            id: {
                separator: '-'
            }
        },
        mode: {
            stack: {
                sprite: 'sprite.svg',
                render: {
                    scss: {
                        dest: '../../../css/blocks/_svg-dim.scss'
                    }
                },
                prefix: '.',
                dimensions: true
            }
        }
    },
    src: 'img/svg/**/*.svg',
    dest: 'img/svg-sprite/'
}

I tried your configuration but I got the same:

.img-svg-bd-dims {
    width: 15px;
    height: 9px;
}

.img-svg-menu-dims {
    width: 25px;
    height: 15px;
}

But I wanted to get:

.img-svg-bd {
    width: 15px;
    height: 9px;
}

.img-svg-menu {
    width: 25px;
    height: 15px;
}

[Joschi Kuphal]

@LostSenSS It seems like you misinterpreted what setting dimensions to TRUE is meant for. For non-CSS sprites («defs», «symbol» and «stack»), TRUE means essentially the same as not setting dimensions at all. Please try setting it to "%s" and let me know the results.

[Oleg Khobotov]

@jkphl Thank you very much, it works right. There is only one thing: prefix stopped work (dots in css disappeared), but I moved it to dimensions: dimensions: '.%s'

[Joschi Kuphal]

@LostSenSS Sorry, my fault: Please set prefix to ".%s" and dimensions to "%s", that should work too (auto-prepending CSS selectors with a dot was remove in this svg-sprite commit).

[Oleg Khobotov]

@jkphl Looks like it doesn't work:

default: {
    options: {
        shape: {
            id: {
                separator: '-'
            }
        },
        mode: {
            stack: {
                sprite: 'sprite.svg',
                render: {
                    scss: {
                        dest: '../../../css/blocks/_svg-dim.scss'
                    }
                },
                prefix: '.%s',
                dimensions: '%s'
            }
        }
    },
    src: 'img/svg/**/*.svg',
    dest: 'img/svg-sprite/'
}

Result:

img-svg-bd {
    width: 15px;
    height: 9px;
}

img-svg-menu {
    width: 25px;
    height: 15px;
}

[Joschi Kuphal]

@LostSenSS Sorry, that was a bug which is now fixed with release v1.0.18.