This preview features two methods of using the generated sprite in conjunction with inline SVG. Please have a look at the HTML source for further details and be aware of the following constraints:
The embedded sprite (A) slightly differs from the generated external one. Please see the documentation for details on how to create such an embeddable sprite.
-
Internet Explorer up to version 11 doesn't support external sprites for use with inline SVG. For IE 9-11, you may polyfill this functionality with SVG for Everybody.
-
-
-
-
-
-
A) Inline SVG with embedded sprite
-
-
-{{#svg}}
-
-
-
-
-
-
-
{{name}}
-
-{{/svg}}
-
-
-
-
B) Inline SVG with external sprite (IE 9-11 with polyfill only)
-
-
-{{#svg}}
-
-
-
-
-
-
-
{{name}}
-
-{{/svg}}
-
-
-
-
-
diff --git a/tmpl/sprite.html b/tmpl/sprite.html
new file mode 120000
index 0000000..b35fbb7
--- /dev/null
+++ b/tmpl/sprite.html
@@ -0,0 +1 @@
+../../svg-sprite/tmpl/sprite.html
\ No newline at end of file
diff --git a/tmpl/sprite.inline.svg b/tmpl/sprite.inline.svg
deleted file mode 100644
index 022b3ea..0000000
--- a/tmpl/sprite.inline.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/tmpl/sprite.inline.svg b/tmpl/sprite.inline.svg
new file mode 120000
index 0000000..7958b7f
--- /dev/null
+++ b/tmpl/sprite.inline.svg
@@ -0,0 +1 @@
+../../svg-sprite/tmpl/sprite.inline.svg
\ No newline at end of file
diff --git a/tmpl/sprite.less b/tmpl/sprite.less
index f0a75a3..a663ced 100644
--- a/tmpl/sprite.less
+++ b/tmpl/sprite.less
@@ -1,11 +1,11 @@
.{{prefix}}{{^common}}(){{/common}} {
- background-repeat: no-repeat;{{#common}}
+ background-repeat: no-repeat;{{#common}}
background-image: url({{{sprite}}});{{/common}}
}
{{#svg}}{{#selector}}.{{expression}}{{^last}},
-{{/last}}{{/selector}} {
- background-position: {{position}};{{^common}}
+{{/last}}{{/selector}} { {{#sprite}}
+ background-position: {{position}};{{/sprite}}{{^common}}
.{{prefix}}();
background-image: url({{#sprite}}{{{sprite}}}{{/sprite}}{{^sprite}}{{#encode}}"{{{encoded}}}"{{/encode}}{{^encode}}{{{path}}}{{/encode}}{{/sprite}});{{/common}}
}{{#dims}}{{#dimensions}}
diff --git a/tmpl/sprite.scss b/tmpl/sprite.scss
index dafb956..fee206c 100644
--- a/tmpl/sprite.scss
+++ b/tmpl/sprite.scss
@@ -4,8 +4,8 @@
}
{{#svg}}{{#selector}}.{{expression}}{{^last}},
-{{/last}}{{/selector}} {
- background-position: {{position}};{{^common}}
+{{/last}}{{/selector}} { {{#sprite}}
+ background-position: {{position}};{{/sprite}}{{^common}}
@extend %{{prefix}};
background-image: url({{#sprite}}{{{sprite}}}{{/sprite}}{{^sprite}}{{#encode}}"{{{encoded}}}"{{/encode}}{{^encode}}{{{path}}}{{/encode}}{{/sprite}});{{/common}}
}{{#dims}}{{#dimensions}}