Symbol mode not outputting css

[iansoper]

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
  }
},

[jkphl]

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

[jkphl]

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

[iansoper]

That makes sense, thanks for clarifying.

[deepfriedmind]

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?

[jkphl]

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

[jkphl]

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.

[LostSenSS]

@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?)

[jkphl]

@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?

[LostSenSS]

@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;
}

[jkphl]

@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.

[LostSenSS]

@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'

[jkphl]

@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).

[LostSenSS]

@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;
}

[jkphl]

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