Fix symbol sprite preview.

[literatesnow]

The symbol sprite preview has invalid html and also doesn't currently use the css dimensions resulting in large images which are pushed outside their boxes.

[coveralls]

Coverage remained the same at 81.32% when pulling 855cc27 on literatesnow:fix-symbol-preview into 7013e00 on jkphl:master.

[coveralls]

Coverage remained the same at 81.32% when pulling 855cc27 on literatesnow:fix-symbol-preview into 7013e00 on jkphl:master.

[jkphl]

Hey @literatesnow,

while both your points are very valid — thanks for reporting! — your fix seems to include some glitches as well. Replacing {{#last}}{{#classname}}{{raw}}{{/classname}}{{/last}} with {{expression}}{{^last}}, {{/last}} doesn't seem correct. I'll fix this.

Cheers,
Joschi

[literatesnow]

@jkphl Thanks. For some reason in my preview the svg class name is still blank (<svg class="">) and the (quick) way to make it work was copy the lines in the template from where it outputs the CSS.

Here's my command line if it helps:

svg-sprite
--dest www/svg
--svg-dimattrs false
--symbol
--symbol-sprite "../../icons.svg"
--symbol-prefix "svg-%s"
--symbol-inline true
--symbol-example
--symbol-example-dest "preview.html"
--log debug
<file1> <file2> <file3> <...>

CSS output:

.svg-icon-logout-dims { width: 28.1px; height: 22.9px; }

HTML output around svg:

<li title="icon-logout">
  <div class="icon-box">
    <!-- icon-logout -->
    <svg class="">
      <use xlink:href="#icon-logout"></use>
    </svg>
  </div>
  <h2>icon-logout</h2>
</li>