-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.template.html
283 lines (251 loc) · 11 KB
/
index.template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Ionicons icon font packaged as SVG sprite." />
<title>Ionicons sprite: SVG sprite icon set based on Ionicons icons</title>
<style type="text/css">
/* Demo page css */
h1,h2{color:#999;font-weight:400}
body,h1,h2{font-weight:400}
h1{font-size:20px}
h2{font-size:16px}
xmp{background:rgba(161, 161, 161, 0.2);border-radius:4px;padding:1rem;}
blockquote{border-left:4px solid rgba(161,161,161,0.2);padding-left:1.5rem;padding:.5rem;}
body{box-sizing:border-box;padding-top:60px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;letter-spacing:0;font-style:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:liga on;color:#373737;font-size:18px;line-height:1.4}
header{text-align:center}
.content{margin-left:auto;margin-right:auto;max-width:66rem;padding-top:1.5em}
main{padding-bottom:1rem;}
section {margin-bottom: 16rem;border-top: 1px solid #4e8ef7;}
p{margin:25px 0}
a{color:#4F8EF7;text-decoration:none;opacity:.7;transition-timing-function:ease-in-out;transition-duration:.1s;transition-property:color;transition-property:opacity}
a:active,a:focus,a:hover{text-decoration:underline;opacity:1}
.download{max-width:200px;width:100%;margin:40px auto 10px}
.download a{display:block;padding:12px 0;border:2px solid #4F8EF7;border-radius:4px;background-color:#fff;text-decoration:none;font-weight:700;font-size:22px}
.download a:hover{background:#4F8EF7;color:#fff}
.version{margin:2px auto;color:#ccc;font-size:12px}
.icon-box{float:left;width:22rem;font-size:32px;padding-bottom:.25rem;cursor:pointer;}
.icon-box#active {color: #4F8EF7;}
.icon-name{font-size:.5em;margin-left:1em}
.clearfix:after,.clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}
footer{position:fixed;bottom:0;left:0;right:0;background-color:#fff;}
footer .content{border-top: 1px solid #4e8ef7;margin:auto;max-width:66rem;padding:0 1rem;}
footer input, footer textarea {display:block;box-sizing:border-box;padding:.5rem;width:100%;min-height:30px;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);color:#333;vertical-align:middle;font-size:14px;-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;margin-bottom:1rem;resize:none;}
footer input:focus,footer textarea:focus{outline:0;border-color:#4F8EF7;}
footer svg{vertical-align:bottom;padding-left:.5rem;fill:#999;}
</style>
<style type="text/css">
/* Example icon styling */
.ion {
display: inline-block;
width: 32px;
height: 32px;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/* ==========================================
Single-colored icons can be modified like so:
.ion-name {
font-size: 32px;
color: red;
}
========================================== */
</style>
</head>
<body>
<!--
Inline <symbol> SVG sprite
====================================================================================================
This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere
below within this document.
-->
<svg width="0" height="0" style="position:absolute">
{{#shapes}}{{{svg}}}{{/shapes}}
</svg>
<footer style="display:none;">
<div class="content">
<h1>
<strong>Your icon is ready!</strong>
<a href="#usage-how">
<svg class="ion-help-circled" height="24" width="24">
<use xlink:href="#ion-help-circled"></use>
</svg>
</a>
<a href id="close-footer" style="float:right;">
<svg class="ion-close-round" height="24" width="24">
<use xlink:href="#ion-close-round"></use>
</svg>
</a>
</h1>
<input type="text" value="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" onclick="this.select();" readonly="">
<textarea onclick="this.select();" readonly="" rows="3"></textarea>
</div>
</footer>
<header class="content">
<h1><strong>Ionicons sprite</strong></h1>
<h2>SVG sprite icon set based on <a href="http://ionicons.com">Ionicons</a> icons</h2>
<h1><a href="#usage">What, why and how?</a></h1>
<p>
<span class="github-star">
<iframe src="https://ghbtns.com/github-btn.html?user=rastasheep&repo=ionicons-sprite&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20" style="margin-left: 0px; margin-right: -30px"></iframe>
</span>
</p>
<p class="download">
<a href="https://github.com/rastasheep/ionicons-sprite/releases">Download</a>
</p>
<p class="version">
100% free and open source. MIT Licensed<br>
Ionicons Version 2.0.1
- <a href="https://github.com/rastasheep/ionicons-sprite">GitHub</a>
- <a href="#usage">Usage</a>
</p>
</header>
<main class="clearfix content">
{{#shapes}} <div class="icon-box">
<svg class="ion {{#selector.dimensions}}{{#last}}{{#classname}}{{raw}}{{/classname}}{{/last}}{{/selector.dimensions}}">
<use xlink:href="#{{name}}"></use>
</svg>
<span class="icon-name">{{name}}</span>
</div>
{{/shapes}}
</main>
<section id="usage" class="content">
<h1><strong>What, why, how?</strong></h1>
<p><a href="https://css-tricks.com/icon-fonts-vs-svg/">Quite</a> a
<a href="https://www.sitepoint.com/icon-fonts-vs-svg-debate/">few</a> <a href="https://una.im/svg-icons">people</a>
have already written articles about this topic,so this one will be short.</p>
<h2 id="usage-what"><strong>• What?</strong></h2>
<p>Icon fonts suck on so many levels. So this is my two cents on making life with
svgs and popular ionicon font a little bit easier. Inline only symbols that you
need and forget about additional requests, icon flickering and other stuff.</p>
<h2 id="usage-why"><strong>• Why?</strong></h2>
<blockquote cite="https://una.im/svg-icons/">
There are basically three options we have when it comes to icon systems:
</br>
- Font/glyph icons </br>
- CSS-based data URIs </br>
- SVG icons </br>
</br>
SVG icons are superior. I'm (not) sorry — they are. SVG is scalable, widely-supported,
and allows for much more flexibility and dynamic editing.
</br>
</br>
Font icons and data URI's in CSS content are a hack, while SVG icons represent
visualizations in the format we expect without weird workarounds for breaking
accessibility due to re-defining native DOM elements.
</blockquote>
~ <a href="https://una.im/svg-icons/">Una Kravets</a>
<h2 id="usage-how"><strong>• How?</strong></h2>
<p>Firstly, you need to add to your page inline <svg> with <defs> tag in it
(it just means that you are defining stuff to use later) which will contain
all <symbol> definitions. Each <symbol> tag will have a unique ID, and will
wrap all the paths and whatnot thus forming an icon.</p>
<pre><xmp><svg width="0" height="0" style="position:absolute">
<defs>
<symbol viewBox="0 0 512 512" id="ion-university">
<!-- all the paths and shapes and whatnot for this icon -->
</symbol>
<symbol viewBox="0 0 512 512" id="ion-wand">
<!-- all the paths and shapes and whatnot for this icon -->
</symbol>
<!-- etc -->
</defs>
</svg>
</xmp></pre>
<p>You can get symbols with example for all icons by clicking on them on this site, or finding them in sprite file <a href="https://github.com/rastasheep/ionicons-sprite/blob/master/sprite.svg">in the repo</a>.</p>
<p>When you add all desired icons you can use them wherever, for example:</p>
<pre><xmp><svg class="ion ion-wand">
<use xlink:href="#ion-wand"></use>
</svg>
</xmp></pre>
<p>As this is plain html, you have the ability to style them with CSS. For that purpose you can use classnames added to svgs.</br>
Note that the icon will be enormous (100% wide) if you don't specify it's dimensions.
</p>
<pre><xmp>/* Example icon styling */
.ion {
display: inline-block;
width: 32px;
height: 32px;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/* Single-colored icons can be modified like so */
.ion-wand {
width: 42px;
height: 42px;
color: red;
}
</xmp></pre>
</section>
<script type="text/javascript">
function DemoPage(document) {
var icons = document.querySelectorAll(".icon-box");
function iconName(element){
return element.querySelectorAll('svg')[0].classList[1]
}
function iconSymbol(iconName) {
return document.querySelector('svg').getElementById(iconName).outerHTML;
}
function iconSvg(iconName){
return "<svg class=\"ion " + iconName + "\"> \n <use xlink:href=\"#" + iconName + "\"></use>\n</svg>";
}
function setIconAsActive(element){
element.setAttribute('id', 'active');
}
function unsetActiveIcon(elements){
for (var i = 0; i < elements.length; i++) {
elements[i].id = '';
}
}
function hideFooter () {
return document.querySelector('footer').style.display = "none";
}
function showFooter (iconSvg, iconSymbol) {
var footer = document.querySelector('footer');
footer.querySelector('input').value = iconSymbol
footer.querySelector('textarea').value = iconSvg;
return footer.style.display = "block";
}
function bindDocumentClick(document) {
document.addEventListener("click", function() {
unsetActiveIcon(icons);
hideFooter();
});
}
function bindFooterClick(document) {
document.querySelector("footer .content").addEventListener("click", function(event) {
event.stopPropagation();
});
document.querySelector("footer #close-footer").addEventListener("click", function(event) {
event.preventDefault();
unsetActiveIcon(icons);
hideFooter();
});
}
function bindIconClick(document, icons) {
for (var i = 0; i < icons.length; i++) {
icons[i].addEventListener("click", function(event) {
event.stopPropagation();
var element = this;
var name = iconName(element)
hideFooter();
showFooter(iconSvg(name), iconSymbol(name));
unsetActiveIcon(icons);
setIconAsActive(element);
});
}
}
bindDocumentClick(document);
bindFooterClick(document);
bindIconClick(document, icons);
}
new DemoPage(document);
</script>
</body>
</html>