Symbol mode not outputting css
iansoper opened this issue · 14 comments
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
}
},
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
Ah, forgot to mention: For the above mentioned reason, the symbol
mode also doesn't have a render
option!
That makes sense, thanks for clarifying.
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?
Good point. Let me think about this. Will get back to you later.
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.
@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?)
@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?
@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;
}
@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.
@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'
@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).
@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;
}
@LostSenSS Sorry, that was a bug which is now fixed with release v1.0.18.