@penskemediacorp/larva 1.57.0 → 1.58.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/__tests__/lib/generateStatic.test.js +11 -10
- package/bin/larva.js +1 -0
- package/build/css/larva-important.css +1 -1
- package/build/css/larva.css +1 -1
- package/build/css/larva.inline-important.css +1 -1
- package/build/css/larva.inline.css +1 -1
- package/build/html/static/js/main.94574a71.js.map +1 -0
- package/build/js/standalone/video-showcase.js +2 -26
- package/build/js/standalone/video-showcase.js.LICENSE.txt +28 -0
- package/build/svg/defs/sprite.defs.html +705 -818
- package/build/svg/defs/sprite.defs.svg +1 -1
- package/lib/utils/getPatternData.js +1 -1
- package/lib/utils/getSubDirectoryNames.js +0 -1
- package/package.json +53 -50
- package/scripts/build-html.js +0 -1
- package/scripts/config/gulpfile.js +1 -3
|
@@ -1,876 +1,763 @@
|
|
|
1
|
-
<!
|
|
2
|
-
<html lang="en"
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>SVG <defs> sprite preview | svg-sprite</title>
|
|
6
|
+
<style>
|
|
7
|
+
body {
|
|
8
|
+
padding: 0;
|
|
9
|
+
margin: 0;
|
|
10
|
+
color: #666;
|
|
11
|
+
background: #fafafa;
|
|
12
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
13
|
+
font-size: 1em;
|
|
14
|
+
line-height: 1.4;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
header {
|
|
18
|
+
display: block;
|
|
19
|
+
padding: 3em 3em 2em;
|
|
20
|
+
background-color: #fff;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
header p {
|
|
24
|
+
margin: 2em 0 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
section {
|
|
28
|
+
border-top: 1px solid #eee;
|
|
29
|
+
padding: 2em 3em 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
section ul {
|
|
33
|
+
margin: 0;
|
|
34
|
+
padding: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
section li {
|
|
38
|
+
display: inline-block;
|
|
39
|
+
background-color: #fff;
|
|
40
|
+
position: relative;
|
|
41
|
+
margin: 0 2em 2em 0;
|
|
42
|
+
vertical-align: top;
|
|
43
|
+
border: 1px solid #ccc;
|
|
44
|
+
padding: 1em 1em 3em;
|
|
45
|
+
cursor: default;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.icon-box {
|
|
49
|
+
margin: 0;
|
|
50
|
+
width: 144px;
|
|
51
|
+
height: 144px;
|
|
52
|
+
position: relative;
|
|
53
|
+
background: #ccc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23fff' d='M6 0h6v6H6zM0 6h6v6H0z'/%3E%3C/svg%3E") top left repeat;
|
|
54
|
+
border: 1px solid #ccc;
|
|
55
|
+
display: table-cell;
|
|
56
|
+
vertical-align: middle;
|
|
57
|
+
text-align: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.icon {
|
|
61
|
+
display: inline-block;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
h1 {
|
|
65
|
+
margin-top: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
h2 {
|
|
69
|
+
margin: 0;
|
|
70
|
+
padding: 0;
|
|
71
|
+
font-size: 1em;
|
|
72
|
+
font-weight: 400;
|
|
73
|
+
white-space: nowrap;
|
|
74
|
+
overflow: hidden;
|
|
75
|
+
text-overflow: ellipsis;
|
|
76
|
+
position: absolute;
|
|
77
|
+
left: 1em;
|
|
78
|
+
right: 1em;
|
|
79
|
+
bottom: 1em;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
footer {
|
|
83
|
+
display: block;
|
|
84
|
+
margin: 0;
|
|
85
|
+
padding: 0 3em 3em;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
footer p {
|
|
89
|
+
margin: 0;
|
|
90
|
+
font-size: .7em;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
footer a {
|
|
94
|
+
color: #0f7595;
|
|
95
|
+
margin-left: 0;
|
|
96
|
+
}
|
|
97
|
+
</style>
|
|
10
98
|
|
|
11
99
|
<!--
|
|
12
|
-
|
|
13
100
|
Sprite shape dimensions
|
|
14
101
|
====================================================================================================
|
|
15
102
|
You will need to set the sprite shape dimensions via CSS when you use them as inline SVG, otherwise
|
|
16
103
|
they would become a huge 100% in size. You may use the following dimension classes for doing so.
|
|
17
104
|
They might well be outsourced to an external stylesheet of course.
|
|
18
|
-
|
|
19
105
|
-->
|
|
20
106
|
|
|
21
|
-
<style
|
|
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
|
-
|
|
107
|
+
<style>
|
|
108
|
+
.svg-arrow-dims { width: 14px; height: 8px; }
|
|
109
|
+
.svg-byline-plus-dims { width: 15px; height: 15px; }
|
|
110
|
+
.svg-camera-dims { width: 22px; height: 20px; }
|
|
111
|
+
.svg-chat-dims { width: 27px; height: 24px; }
|
|
112
|
+
.svg-clock-dims { width: 35px; height: 33px; }
|
|
113
|
+
.svg-close-dims { width: 13px; height: 12px; }
|
|
114
|
+
.svg-email-dims { width: 14px; height: 9px; }
|
|
115
|
+
.svg-envelope-dims { width: 14px; height: 9px; }
|
|
116
|
+
.svg-facebook-dims { width: 24px; height: 24px; }
|
|
117
|
+
.svg-fire-dims { width: 14px; height: 19px; }
|
|
118
|
+
.svg-flipboard-dims { width: 30px; height: 30px; }
|
|
119
|
+
.svg-gallery-dims { width: 34.237px; height: 31.943px; }
|
|
120
|
+
.svg-google-dims { width: 24px; height: 24px; }
|
|
121
|
+
.svg-hamburger-dims { width: 19.4px; height: 14.5px; }
|
|
122
|
+
.svg-info-dims { width: 20px; height: 20px; }
|
|
123
|
+
.svg-instagram-dims { width: 19px; height: 19px; }
|
|
124
|
+
.svg-linkedin-dims { width: 24px; height: 24px; }
|
|
125
|
+
.svg-pinit-dims { width: falsepx; height: falsepx; }
|
|
126
|
+
.svg-pinterest-dims { width: falsepx; height: falsepx; }
|
|
127
|
+
.svg-plus-dims { width: falsepx; height: falsepx; }
|
|
128
|
+
.svg-pmc-logo-dims { width: 424.16px; height: 55.06px; }
|
|
129
|
+
.svg-pmc-logo-white-dims { width: 537.42px; height: 69.75px; }
|
|
130
|
+
.svg-print-dims { width: 166px; height: 166px; }
|
|
131
|
+
.svg-reddit-dims { width: 24px; height: 24px; }
|
|
132
|
+
.svg-search-dims { width: 18px; height: 18px; }
|
|
133
|
+
.svg-star-dims { width: 23px; height: 21px; }
|
|
134
|
+
.svg-star-half-dims { width: 12px; height: 21px; }
|
|
135
|
+
.svg-triangle-right-dims { width: 13.188px; height: 16.956px; }
|
|
136
|
+
.svg-tumblr-dims { width: falsepx; height: falsepx; }
|
|
137
|
+
.svg-twitter-dims { width: 24px; height: 24px; }
|
|
138
|
+
.svg-whatsapp-dims { width: 24px; height: 24px; }
|
|
139
|
+
.svg-youtube-dims { width: 19px; height: 14px; }
|
|
54
140
|
</style>
|
|
55
141
|
|
|
56
142
|
<!--
|
|
57
143
|
====================================================================================================
|
|
58
144
|
-->
|
|
59
145
|
|
|
60
|
-
|
|
61
|
-
|
|
146
|
+
</head>
|
|
147
|
+
<body>
|
|
62
148
|
|
|
63
149
|
<!--
|
|
64
|
-
|
|
65
150
|
Inline <defs> SVG sprite
|
|
66
151
|
====================================================================================================
|
|
67
152
|
This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere
|
|
68
153
|
below within this document. Please see
|
|
69
154
|
|
|
70
|
-
|
|
155
|
+
https://github.com/svg-sprite/svg-sprite/blob/main/docs/configuration.md#defs--symbol-mode
|
|
71
156
|
|
|
72
157
|
for further details on how to create this embeddable sprite variant.
|
|
73
|
-
|
|
74
158
|
-->
|
|
75
159
|
|
|
76
160
|
<svg width="0" height="0" style="position:absolute">
|
|
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
|
-
|
|
161
|
+
<defs>
|
|
162
|
+
<svg viewBox="0 0 14 8" id="arrow"><path d="m13.7 1.7-6 6c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-6-6C-.1 1.3-.1.7.3.3s1-.4 1.4 0L7 5.6 12.3.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4z"/></svg>
|
|
163
|
+
<svg viewBox="0 0 15 15" id="byline-plus"><path d="M2.53 5.27H.74V.6h4.67v1.78H2.53v2.89zm10.34 7.45H9.98v1.79h4.67V9.84h-1.78v2.88zM9.98 2.38h2.89v2.89h1.78V.6H9.98v1.78zM2.53 9.84H.74v4.67h4.67v-1.79H2.53V9.84zM11 6.66H8.59V4.24H6.8v2.42H4.39v1.78H6.8v2.42h1.78V8.44H11V6.66z"/></svg>
|
|
164
|
+
<svg viewBox="0 0 22 20" id="camera" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF"><path d="M20.6 12.88a.81.81 0 0 0 .82-.81V6.8a3.25 3.25 0 0 0-3.24-3.25h-1.23a.81.81 0 0 1-.77-.55l-.25-.72a2.43 2.43 0 0 0-2.3-1.64H8.45a2.44 2.44 0 0 0-2.29 1.6l-.28.78a.81.81 0 0 1-.76.53H3.9A3.25 3.25 0 0 0 .66 6.8v9.32a3.25 3.25 0 0 0 3.24 3.25h14.28a3.25 3.25 0 0 0 3.24-3.25.81.81 0 1 0-1.62 0c0 .9-.73 1.63-1.62 1.63H3.9a1.62 1.62 0 0 1-1.62-1.63V6.8c0-.9.73-1.62 1.62-1.62h1.22A2.44 2.44 0 0 0 7.4 3.57l.28-.78a.81.81 0 0 1 .76-.53h5.18a.81.81 0 0 1 .77.55l.24.72a2.43 2.43 0 0 0 2.3 1.65h1.24c.89 0 1.62.72 1.62 1.62v5.27c0 .45.36.8.8.8z"/><path d="M11.08 5.99a5.07 5.07 0 0 0-5.07 5.06 5.07 5.07 0 0 0 5.07 5.07 5.07 5.07 0 0 0 5.07-5.07A5.07 5.07 0 0 0 11.08 6zm0 8.51a3.45 3.45 0 0 1-3.45-3.44 3.45 3.45 0 0 1 3.45-3.45 3.45 3.45 0 0 1 3.45 3.44 3.45 3.45 0 0 1-3.45 3.45z"/></g></svg>
|
|
165
|
+
<svg viewBox="0 0 27 24" id="chat"><path d="M0 8.304c.077-.423.129-.854.235-1.266.495-1.922 1.554-3.36 2.94-4.488C4.85 1.183 6.733.447 8.758.175c2.125-.285 4.21-.087 6.237.736 1.88.763 3.53 1.928 4.736 3.824a7.777 7.777 0 0 1-.262 8.766c-1.393 1.911-3.198 3.032-5.233 3.7-2.028.666-4.088.73-6.165.35a.519.519 0 0 0-.38.097c-1.567 1.22-3.278 2.002-5.142 2.335-.229.041-.42-.025-.544-.252-.132-.243-.14-.505.027-.733.263-.362.543-.708.81-1.066.457-.613.858-1.267 1.102-2.076l-.315-.229c-1.368-1.014-2.494-2.294-3.138-4.053-.214-.586-.3-1.236-.444-1.856L0 9.516V8.304zm26.143 5.317c-.043.273-.08.547-.13.818-.323 1.72-1.145 3.08-2.254 4.212-.453.463-.959.855-1.488 1.32.166.358.315.787.543 1.146.386.607.828 1.164 1.235 1.754.097.14.193.32.21.493.042.4-.251.69-.606.627-1.764-.314-3.396-1.041-4.881-2.203-.228-.178-.431-.241-.704-.19-1.92.362-3.829.27-5.713-.303a10.272 10.272 0 0 1-3.316-1.727c.166 0 .267-.007.368.001a12.638 12.638 0 0 0 5.216-.675c2.444-.85 4.583-2.282 6.147-4.713 1.515-2.355 2.009-4.98 1.368-7.866a1.393 1.393 0 0 1-.025-.146c-.002-.018.009-.037.034-.132.504.425 1.014.802 1.472 1.252 1.255 1.23 2.157 2.731 2.448 4.669.023.154.05.308.076.463v1.2z" fill-rule="evenodd"/></svg>
|
|
166
|
+
<svg viewBox="0 0 35 33" id="clock"><path d="M22.1 22.8 17 18v-7.1h1.3v6.5l4.6 4.4-.8 1zm12.7-6.1C34.8 7.8 27.1.6 17.7.6 8.3.6.7 7.8.7 16.7s7.7 16.1 17.1 16.1c9.3 0 17-7.3 17-16.1zm-1.4 0c0 8.1-7.1 14.8-15.7 14.8C9 31.4 2 24.8 2 16.7S9 1.9 17.7 1.9s15.7 6.6 15.7 14.8z"/></svg>
|
|
167
|
+
<svg viewBox="0 0 13 12" id="close"><path d="M12.164 1.423 11.058.318 6.396 4.98 1.735.318.629 1.423l4.662 4.662-4.662 4.662 1.106 1.105 4.661-4.661 4.662 4.661 1.106-1.105-4.662-4.662z" fill-rule="evenodd"/></svg>
|
|
168
|
+
<svg viewBox="0 0 14 9" id="email"><path d="M.64.728C.5.654.27.524.218.369.13.105.225 0 .599 0h12.869c.374 0 .468.102.38.37-.05.15-.282.284-.42.358-.37.204-5.513 3.132-5.705 3.238-.191.105-.387.154-.69.154-.302 0-.498-.049-.69-.154C6.153 3.86 1.01.932.64.728zm13.08.158c.3-.158.28.025.28.172v7.207c0 .324-.394.735-.724.735H.791C.46 9 0 8.592 0 8.265V1.058C0 .914.017.728.313.886c.276.148 2.78 1.99 4.419 3.097L1.969 7.235c-.068.07-.098.158-.057.197.04.042.13.021.198-.05l3.318-2.924c.502.337.852.57.916.604.259.138.44.155.69.155.249 0 .43-.017.69-.154.06-.036.413-.268.915-.605l3.318 2.925c.07.067.158.088.199.049.037-.042.006-.127-.061-.197L9.329 3.983c1.639-1.107 4.115-2.95 4.391-3.097z"/></svg>
|
|
169
|
+
<svg viewBox="0 0 14 9" id="envelope"><path d="M.77.945C.636.875.406.752.356.605.269.357.362.258.731.258h12.723c.37 0 .462.096.376.349-.05.143-.28.27-.416.34-.366.192-5.45 2.964-5.64 3.064-.19.1-.382.146-.681.146-.3 0-.493-.047-.683-.146C6.22 3.91 1.137 1.138.77.945zm12.934.15c.296-.15.276.023.276.163v6.82c0 .307-.39.696-.716.696H.921c-.326 0-.782-.386-.782-.695V1.258c0-.136.016-.313.31-.163.272.14 2.747 1.883 4.368 2.931L2.085 7.104c-.066.066-.096.15-.056.186.04.04.13.02.196-.046l3.28-2.769c.496.32.842.54.905.573.257.13.436.146.683.146.246 0 .425-.017.682-.146.06-.034.409-.253.905-.573l3.28 2.769c.07.063.156.083.196.046.037-.04.007-.12-.06-.186L9.363 4.026c1.62-1.048 4.069-2.791 4.342-2.931z"/></svg>
|
|
170
|
+
<svg viewBox="0 0 24 24" id="facebook"><path d="M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.378 14.192 5 15.115 5H18V0h-3.808C10.596 0 9 1.583 9 4.615V8z"/></svg>
|
|
171
|
+
<svg viewBox="0 0 14 19" id="fire"><path d="M14 13.4c0-.6-.2-1.2-.4-1.7s-.5-1-.8-1.5c0-.1-.1-.2-.1-.2s0-.1-.1-.1c0-.1-.1-.1-.1-.1-.2-.3-.4-.6-.5-.7l-.9-1.2C10.4 7 9.6 6.1 9 5.1l-.6-1c-.1-.3-.3-.7-.4-1-.3-1-.3-1.9.1-2.9V.1H8c-.7.4-1.4.8-2 1.3-.7.6-1.3 1.3-1.6 2.1-.3.9-.3 1.9.1 2.8.1.2.1.4.2.6l-.1-.1c-.2-.2-.4-.3-.6-.5-.5-.3-1.1-.6-1.7-.8h-.2v.2c0 .1.1.1.1.2.2.8.3 1.5.1 2.3 0 0-.2.6-.4 1.1-.1.1-.1.2-.2.4-.2.3-.4.6-.4.7-.5.8-1 1.7-1.1 2.7 0 0-.1.9.1 1.5.3 1.5 1 2.7 2.2 3.7.3.3.6.5.8.5.2.1.4.1.4.1l-.3-.5v-.1c-.4-.7-.5-1.5-.3-2.3.1-.6.4-1.2.8-1.8.5-.7 1.1-1.4 1.7-2 .5-.5.9-1.1 1.3-1.7.3-.5.4-1 .3-1.5 0-.2-.1-.4-.2-.6h.1c.3.2.5.3.7.5 1.1.9 1.6 2 1.8 3.3.2 1 0 2.1-.4 3.1 0 .1-.1.2-.1.4.7-.2 1.2-.6 1.4-1.3 1 1.2 1.1 2.5.4 3.9-.1.3 0 .5 0 .5h.1l.8-.5c1.1-.9 1.9-2 2.2-3.3v-1.6"/></svg>
|
|
172
|
+
<svg viewBox="0 0 500 500" id="flipboard" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v500h500V0Zm400 200H300v100H200v100H100V100h300Z"/></svg>
|
|
173
|
+
<svg viewBox="0 0 34.237 31.943" id="gallery" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><rect height="26.738" rx="5" width="29.031" y="5.205"/><path d="M10.206 0h19.03a5.006 5.006 0 0 1 5 5v16.737a5.018 5.018 0 0 1-3.278 4.697 4.985 4.985 0 0 0 .3-1.721V7.974a5.006 5.006 0 0 0-5-5H7.228a4.984 4.984 0 0 0-1.721.3A5.019 5.019 0 0 1 10.206 0z"/></g></svg>
|
|
174
|
+
<svg viewBox="0 0 24 24" id="google"><path d="M7 11v2.4h3.97c-.16 1.029-1.2 3.02-3.97 3.02-2.39 0-4.34-1.979-4.34-4.42 0-2.44 1.95-4.42 4.34-4.42 1.36 0 2.27.58 2.79 1.08l1.9-1.83C10.47 5.69 8.89 5 7 5c-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.721-2.84 6.721-6.84 0-.46-.051-.81-.111-1.16H7zm0 0 17 2h-3v3h-2v-3h-3v-2h3V8h2v3h3v2z" fill-rule="evenodd" clip-rule="evenodd"/></svg>
|
|
175
|
+
<svg viewBox="0 0 19.4 14.5" id="hamburger"><path d="M0 0h19.4v2.5H0zm0 6h19.4v2.5H0zm0 6h19.4v2.5H0z"/></svg>
|
|
176
|
+
<svg viewBox="0 0 20 20" id="info"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z"/></svg>
|
|
177
|
+
<svg viewBox="0 0 19 19" id="instagram"><path d="M9.5 0c2.58 0 2.904.01 3.917.057 1.011.046 1.702.207 2.306.442a4.657 4.657 0 0 1 1.683 1.095A4.657 4.657 0 0 1 18.5 3.277c.235.604.396 1.295.442 2.306C18.989 6.596 19 6.92 19 9.5s-.01 2.904-.057 3.917c-.046 1.011-.207 1.702-.442 2.306a4.657 4.657 0 0 1-1.095 1.683 4.657 4.657 0 0 1-1.683 1.095c-.604.235-1.295.396-2.306.442-1.013.046-1.337.057-3.917.057s-2.904-.01-3.917-.057c-1.011-.046-1.702-.207-2.306-.442a4.657 4.657 0 0 1-1.683-1.095A4.657 4.657 0 0 1 .5 15.723c-.235-.604-.396-1.295-.442-2.306C.011 12.404 0 12.08 0 9.5s.01-2.904.057-3.917C.103 4.572.264 3.881.5 3.277a4.657 4.657 0 0 1 1.095-1.683A4.657 4.657 0 0 1 3.277.5C3.881.264 4.572.103 5.583.057 6.596.011 6.92 0 9.5 0zm0 1.712c-2.537 0-2.837.01-3.839.055-.926.042-1.43.197-1.764.327-.443.173-.76.378-1.092.71a2.943 2.943 0 0 0-.71 1.093c-.13.335-.286.838-.328 1.764-.046 1.002-.055 1.302-.055 3.839s.01 2.837.055 3.839c.042.926.197 1.43.327 1.764.173.443.378.76.71 1.092.333.333.65.538 1.093.71.335.13.838.286 1.764.328 1.002.046 1.302.055 3.839.055s2.837-.01 3.839-.055c.926-.042 1.43-.197 1.764-.327.443-.173.76-.378 1.092-.71.333-.333.538-.65.71-1.093.13-.335.286-.838.328-1.764.046-1.002.055-1.302.055-3.839s-.01-2.837-.055-3.839c-.042-.926-.197-1.43-.327-1.764a2.943 2.943 0 0 0-.71-1.092 2.943 2.943 0 0 0-1.093-.71c-.335-.13-.838-.286-1.764-.328-1.002-.046-1.302-.055-3.839-.055zm0 2.91a4.878 4.878 0 1 1 0 9.756 4.878 4.878 0 0 1 0-9.756zm0 8.045a3.167 3.167 0 1 0 0-6.334 3.167 3.167 0 0 0 0 6.334zm6.211-8.238a1.14 1.14 0 1 1-2.28 0 1.14 1.14 0 0 1 2.28 0z" fill-rule="evenodd"/></svg>
|
|
178
|
+
<svg viewBox="0 0 24 24" id="linkedin"><path d="M4.98 3.5C4.98 4.881 3.87 6 2.5 6S.02 4.881.02 3.5C.02 2.12 1.13 1 2.5 1s2.48 1.12 2.48 2.5zM5 8H0v16h5V8zm7.982 0H8.014v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0V24H24V13.869c0-7.88-8.922-7.593-11.018-3.714V8z"/></svg>
|
|
179
|
+
<svg viewBox="0 0 NaN NaN" id="pinit"><path d="M2.04 8.34c.17-.28.26-.54.26-.77a1 1 0 0 0-.13-.55l-.3-.5c-.1-.2-.18-.39-.2-.57-.1-.7-.03-1.37.23-2.02.27-.65.66-1.17 1.18-1.56.52-.4 1.09-.7 1.71-.9a3.5 3.5 0 0 1 3.65.87c.42.43.67 1.06.77 1.87.09.82.04 1.6-.16 2.34-.2.74-.56 1.37-1.08 1.88-.51.5-1.1.7-1.77.56-.49-.1-.79-.33-.9-.7-.11-.38-.1-.81.06-1.3.15-.49.3-.98.48-1.48.17-.5.23-.96.2-1.38a.94.94 0 0 0-.66-.86 1.3 1.3 0 0 0-1.14.08c-.35.21-.6.5-.77.9a3.26 3.26 0 0 0 .05 2.54c-.08.38-.2.85-.34 1.41l-.39 1.44a18.75 18.75 0 0 0-.46 3.07c0 .45.03 1.02.08 1.72a4.08 4.08 0 0 0 1.4-1.86c.31-.8.6-1.8.84-3.02l.45.28c.19.14.34.23.45.3a2.83 2.83 0 0 0 1.02.32 3.6 3.6 0 0 0 2.73-.81 5.1 5.1 0 0 0 1.66-2.48A7.1 7.1 0 0 0 11.22 4 4.15 4.15 0 0 0 9.1.86a6.5 6.5 0 0 0-4.2-.8 5.65 5.65 0 0 0-3.38 1.59A4.67 4.67 0 0 0 .01 5.02c-.08 1.9.6 3 2.03 3.32z" fill-rule="evenodd"/></svg>
|
|
180
|
+
<svg viewBox="0 0 NaN NaN" id="pinterest"><path d="M2.04 8.34c.17-.28.26-.54.26-.77a1 1 0 0 0-.13-.55l-.3-.5c-.1-.2-.18-.39-.2-.57-.1-.7-.03-1.37.23-2.02.27-.65.66-1.17 1.18-1.56.52-.4 1.09-.7 1.71-.9a3.5 3.5 0 0 1 3.65.87c.42.43.67 1.06.77 1.87.09.82.04 1.6-.16 2.34-.2.74-.56 1.37-1.08 1.88-.51.5-1.1.7-1.77.56-.49-.1-.79-.33-.9-.7-.11-.38-.1-.81.06-1.3.15-.49.3-.98.48-1.48.17-.5.23-.96.2-1.38a.94.94 0 0 0-.66-.86 1.3 1.3 0 0 0-1.14.08c-.35.21-.6.5-.77.9a3.26 3.26 0 0 0 .05 2.54c-.08.38-.2.85-.34 1.41l-.39 1.44a18.75 18.75 0 0 0-.46 3.07c0 .45.03 1.02.08 1.72a4.08 4.08 0 0 0 1.4-1.86c.31-.8.6-1.8.84-3.02l.45.28c.19.14.34.23.45.3a2.83 2.83 0 0 0 1.02.32 3.6 3.6 0 0 0 2.73-.81 5.1 5.1 0 0 0 1.66-2.48A7.1 7.1 0 0 0 11.22 4 4.15 4.15 0 0 0 9.1.86a6.5 6.5 0 0 0-4.2-.8 5.65 5.65 0 0 0-3.38 1.59A4.67 4.67 0 0 0 .01 5.02c-.08 1.9.6 3 2.03 3.32z" fill-rule="evenodd"/></svg>
|
|
181
|
+
<svg viewBox="0 0 NaN NaN" id="plus"><path d="M11 4.75v1.5c0 .2-.07.39-.22.53a.72.72 0 0 1-.53.22H7v3.25c0 .2-.07.39-.22.53a.72.72 0 0 1-.53.22h-1.5a.72.72 0 0 1-.53-.22.72.72 0 0 1-.22-.53V7H.75a.72.72 0 0 1-.53-.22.72.72 0 0 1-.22-.53v-1.5c0-.2.07-.39.22-.53A.72.72 0 0 1 .75 4H4V.75c0-.2.07-.39.22-.53A.72.72 0 0 1 4.75 0h1.5c.2 0 .39.07.53.22A.7.7 0 0 1 7 .75V4h3.25c.2 0 .39.07.53.22a.7.7 0 0 1 .22.53z" fill-rule="evenodd"/></svg>
|
|
182
|
+
<svg viewBox="0 0 424.16 55.06" style="height:auto;width:100%" id="pmc-logo" xmlns="http://www.w3.org/2000/svg"><g data-name="Layer 2"><g data-name="Layer 1"><path data-name="Path 2512" d="M424.15 55.06h-98.88c-11.84 0-20.75-5-20.75-17.28V18.19c0-12.62 7.3-18.19 21.19-18.19h98.44v7.68h-98.28c-7.53 0-13.2 2.4-13.2 10.68v18.87c0 6.48 4.69 10.18 12.38 10.18h99.11v7.65Z"/><path data-name="Path 2513" d="M119.39 19.79c0 8.35-7.16 12.54-15.46 12.54H8.36v22.72H0V24.79h104.32c4.6 0 7-1.74 6.93-6.1l-.06-5.18c0-4.6-2.16-5.72-6.87-5.72H0V0h105.2c7.76 0 14.2 3.1 14.2 11v8.8Z"/><g data-name="Group 2634"><g data-name="Group 2631"><g data-name="Group 2630"><path data-name="Path 2514" d="M138 55.05h8.36V15.61l-8.36-4Z"/><path data-name="Path 2515" d="M212 31.51 146.33 0H138v5.29l66.11 31.76a19.32 19.32 0 0 0 7.89 1.77Z"/></g></g><g data-name="Group 2633"><g data-name="Group 2632"><path data-name="Path 2516" d="M285.93 55.05h-8.36V15.6l8.36-4Z"/><path data-name="Path 2517" d="M212 31.51 277.58 0h8.36v5.29l-66.11 31.76a19.28 19.28 0 0 1-7.83 1.77Z" style="fill:#e50019"/></g></g></g></g></g></svg>
|
|
183
|
+
<svg viewBox="0 0 537.42 69.75" id="pmc-logo-white" xmlns="http://www.w3.org/2000/svg"><g data-name="Layer 2"><g data-name="Layer 1"><path d="M537.42 69.75H412.13c-15 0-26.28-6.29-26.28-21.89V23c0-16 9.24-23 26.84-23h124.73v9.73H412.89c-9.53 0-16.73 3-16.73 13.52v23.92c0 8.2 5.94 12.89 15.69 12.89h125.57v9.69zM151.28 25.06c0 10.59-9.08 15.9-19.59 15.9H10.6v28.79H0V31.41h132.17c5.84 0 8.85-2.22 8.79-7.74l-.07-6.55c-.06-5.83-2.74-7.25-8.72-7.25H0V0h133.29c9.83 0 18 3.93 18 13.91v11.15zm23.55 44.69h10.6l-.02-49.98-10.59-5.11.01 55.09zm93.73-29.82L185.41 0h-10.59v6.7l83.77 40.24a24.31 24.31 0 0 0 10 2.24zm93.73 29.82H351.7l.01-49.98 10.59-5.11-.01 55.09z" style="fill:#fff"/><path d="M268.56 39.93 351.71 0h10.59v6.7l-83.77 40.24a24.31 24.31 0 0 1-10 2.24z" style="fill:#ed1c24"/></g></g></svg>
|
|
184
|
+
<svg viewBox="0 0 166 166" id="print" xmlns="http://www.w3.org/2000/svg"><style>.awst1{fill:#fff}</style><g id="awprint_1_" transform="translate(1251 1399)"><g id="awGroup-3_1_" transform="translate(0 .992)"><defs><filter id="awAdobe_OpacityMaskFilter" x="-1251" y="-1400" width="166" height="166"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="-1251" y="-1400" width="166" height="166" id="awmask-2_1_"><g filter="url(#awAdobe_OpacityMaskFilter)"><path id="awpath-1_1_" class="awst1" d="M-1251-1400h166v166h-166z"/></g></mask><path id="awFill-1_1_" d="M-1113.8-1317c5.2 0 9.6-4.3 9.6-9.4 0-5.3-4.2-9.7-9.4-9.7-5.4 0-9.7 4.2-9.7 9.6 0 5.2 4.3 9.5 9.5 9.5zm-99.1-31.9h89.4v-31.6c0-.4 0-.8-.1-1.2-.6-3.3-3.1-5.4-6.5-5.4h-76.1c-.5 0-1.1 0-1.6.2-3.1.7-5 3.1-5 6.4v31.2l-.1.4zm0 44.7v50.9c0 .4 0 .8.1 1.2.6 3.3 3.1 5.4 6.6 5.4h76.1c.5 0 1 0 1.5-.1 3.2-.7 5.2-3.1 5.2-6.5v-50.8h-89.5zm5.1-95.8h79.2c.2 0 .3.1.5.1 2.4.2 4.7.8 6.8 2 6.9 3.8 10.5 9.6 10.6 17.5v31.6h6.9c2.9 0 5.7.6 8.2 2 7 3.7 10.6 9.5 10.7 17.4.1 12.6 0 25.2 0 37.8 0 1.1-.1 2.2-.2 3.2-.6 3.6-2.1 6.9-4.5 9.6-3.7 4.2-8.4 6.4-14 6.5-2.1.1-4.2 0-6.4 0h-.6v18.9c0 3.1-.6 6-2 8.7-3.7 6.9-9.6 10.6-17.5 10.6-25.2.1-50.4 0-75.6 0-1 0-2.1-.1-3.1-.2-5-.7-9.1-3-12.3-6.9-3-3.6-4.4-7.8-4.4-12.5v-18.7h-6.1c-1.2 0-2.3-.1-3.5-.3-7.4-1.3-13.6-7.1-15.2-14.4-.2-1-.4-2-.5-3v-41.1c0-.1.1-.2.1-.3.2-2.7 1-5.3 2.4-7.6 3.7-6.2 9.2-9.5 16.5-9.7 1.8-.1 3.7 0 5.5 0h.8v-31.5c0-1 0-2.1.2-3.1 1-7.7 7-14.3 14.6-16 .8-.3 1.9-.4 2.9-.6z" mask="url(#awmask-2_1_)"/></g><defs><filter id="awAdobe_OpacityMaskFilter_1_" x="-1199.9" y="-1290.4" width="63.8" height="12.7"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="-1199.9" y="-1290.4" width="63.8" height="12.7" id="awmask-4_2_"><g filter="url(#awAdobe_OpacityMaskFilter_1_)"><path id="awpath-3_2_" class="awst1" d="M-1251-1233h166v-166h-166z"/></g></mask><path id="awFill-4_1_" mask="url(#awmask-4_2_)" d="M-1199.9-1277.8h63.8v-12.6h-63.8z"/><defs><filter id="awAdobe_OpacityMaskFilter_2_" x="-1199.9" y="-1271.3" width="44.6" height="12.7"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="-1199.9" y="-1271.3" width="44.6" height="12.7" id="awmask-4_1_"><g filter="url(#awAdobe_OpacityMaskFilter_2_)"><path id="awpath-3_1_" class="awst1" d="M-1251-1233h166v-166h-166z"/></g></mask><path id="awFill-6_1_" mask="url(#awmask-4_1_)" d="M-1199.9-1258.6h44.6v-12.7h-44.6z"/></g></svg>
|
|
185
|
+
<svg viewBox="0 0 24 24" id="reddit"><path d="M24 11.779a2.654 2.654 0 0 0-4.497-1.899c-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058a2.17 2.17 0 0 0 2.174 2.163 2.17 2.17 0 0 0 2.172-2.163 2.171 2.171 0 0 0-4.193-.785l-4.329-1.015a.37.37 0 0 0-.44.249L11.755 7.82c-2.838.034-5.409.798-7.3 2.025a2.643 2.643 0 0 0-1.799-.712A2.654 2.654 0 0 0 0 11.779c0 .97.533 1.811 1.317 2.271a4.716 4.716 0 0 0-.086.857C1.231 18.818 6.039 22 11.95 22s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81A2.633 2.633 0 0 0 24 11.779zM6.776 13.595c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179L12 19.44l-.013.003c-1.777 0-3.028-.386-3.824-1.179a.369.369 0 0 1 0-.523.372.372 0 0 1 .526 0c.65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962a.373.373 0 0 1 .526 0 .37.37 0 0 1 0 .524zm-.189-3.095a1.58 1.58 0 0 1-1.581-1.574c0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg>
|
|
186
|
+
<svg viewBox="0 0 18 18" id="search"><path d="m17.7 16.3-1.5 1.5-5-5V12l-.2-.2c-1.1 1-2.6 1.6-4.2 1.6-3.6 0-6.5-2.9-6.5-6.5S3.2.4 6.8.4s6.5 2.9 6.5 6.5c0 1.6-.6 3.1-1.6 4.2l.3.3h.8l4.9 4.9zm-6.5-9.5c0-2.5-2-4.5-4.5-4.5s-4.5 2-4.5 4.5 2 4.5 4.5 4.5 4.5-2 4.5-4.5z" fill-rule="evenodd"/></svg>
|
|
187
|
+
<svg viewBox="0 0 23 21" id="star"><path d="m11.5 17.25-6.76 3.554 1.291-7.527-5.468-5.33 7.557-1.1L11.5 0l3.38 6.848 7.557 1.098-5.468 5.33 1.29 7.528z"/></svg>
|
|
188
|
+
<svg viewBox="0 0 23 21" id="star-half"><path d="m11.5 17.25-6.76 3.554 1.291-7.527-5.468-5.33 7.557-1.1L11.5 0z"/></svg>
|
|
189
|
+
<svg viewBox="0 0 13.188 16.956" id="triangle-right" xmlns="http://www.w3.org/2000/svg"><path data-name="Polygon 384" d="M13.188 8.478 0 16.956V0Z"/></svg>
|
|
190
|
+
<svg viewBox="0 0 NaN NaN" id="tumblr"><path d="M1.95 10.96c0 .66.07 1.16.22 1.52.14.36.39.69.75.99a4.85 4.85 0 0 0 2.85.96 7.2 7.2 0 0 0 3.29-.77V11.5c-.59.39-1.22.59-1.9.59a2 2 0 0 1-1.1-.31 1.15 1.15 0 0 1-.54-.62 7.05 7.05 0 0 1-.09-1.55V6.3h3.63V3.6H5.43V0H3.1a5.2 5.2 0 0 1-.49 1.85 3.8 3.8 0 0 1-.99 1.22c-.34.3-.87.56-1.61.79v2.45h1.95v4.65z" fill-rule="evenodd"/></svg>
|
|
191
|
+
<svg viewBox="0 0 24 24" id="twitter"><path d="M24 4.557a9.83 9.83 0 0 1-2.828.775 4.932 4.932 0 0 0 2.165-2.724 9.864 9.864 0 0 1-3.127 1.195 4.916 4.916 0 0 0-3.594-1.555c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 0 1 1.671 3.149a4.93 4.93 0 0 0 1.523 6.574 4.903 4.903 0 0 1-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 0 1-2.224.084 4.928 4.928 0 0 0 4.6 3.419A9.9 9.9 0 0 1 0 19.54a13.94 13.94 0 0 0 7.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0 0 24 4.557z"/></svg>
|
|
192
|
+
<svg viewBox="0 0 24 24" id="whatsapp"><path d="m.057 24 1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
|
|
193
|
+
<svg viewBox="0 0 19 14" id="youtube"><path d="M7.538 9.582V3.989l5.133 2.806-5.133 2.787zM18.81 3.02s-.186-1.372-.755-1.976C17.332.251 16.522.248 16.15.202 13.492 0 9.504 0 9.504 0h-.008S5.508 0 2.849.202c-.372.046-1.181.05-1.904.842C.375 1.648.19 3.02.19 3.02S0 4.63 0 6.24v1.51c0 1.612.19 3.222.19 3.222s.185 1.372.755 1.976c.723.793 1.672.768 2.095.85C4.56 13.954 9.5 14 9.5 14s3.992-.006 6.651-.208c.371-.046 1.181-.05 1.904-.843.57-.604.755-1.976.755-1.976s.19-1.61.19-3.221v-1.51c0-1.611-.19-3.222-.19-3.222z" fill-rule="evenodd"/></svg>
|
|
194
|
+
</defs>
|
|
111
195
|
</svg>
|
|
112
196
|
|
|
113
197
|
<!--
|
|
114
198
|
====================================================================================================
|
|
115
199
|
-->
|
|
116
200
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<section>
|
|
201
|
+
<header>
|
|
202
|
+
<h1>SVG <code><defs></code> sprite preview</h1>
|
|
203
|
+
<p>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:</p>
|
|
204
|
+
<ul>
|
|
205
|
+
<li>Your browser has to <a href="https://caniuse.com/svg-html5" target="_blank" rel="noopener noreferrer">support inline SVG</a> for these techniques to work.</li>
|
|
206
|
+
<li>The embedded sprite (A) slightly differs from the generated external one. Please <a href="https://github.com/svg-sprite/svg-sprite/blob/main/docs/configuration.md#defs--symbol-mode" target="_blank" rel="noopener noreferrer">see the documentation</a> for details on how to create such an embeddable sprite.</li>
|
|
207
|
+
</ul>
|
|
208
|
+
</header>
|
|
209
|
+
<section>
|
|
127
210
|
|
|
128
211
|
<!--
|
|
129
|
-
|
|
130
212
|
A) Inline SVG with embedded sprite
|
|
131
213
|
====================================================================================================
|
|
132
214
|
These SVG images make use of fragment identifiers (IDs) and are extracted out of the inline sprite
|
|
133
215
|
embedded above. They may be styled via CSS.
|
|
134
|
-
|
|
135
216
|
-->
|
|
136
217
|
|
|
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
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
<svg viewBox="0 0 24 24" class="svg-reddit-dims">
|
|
398
|
-
<use xlink:href="#reddit"></use>
|
|
399
|
-
</svg>
|
|
400
|
-
|
|
401
|
-
</div>
|
|
402
|
-
<h2>reddit</h2>
|
|
403
|
-
</li>
|
|
404
|
-
<li title="search">
|
|
405
|
-
<div class="icon-box">
|
|
406
|
-
|
|
407
|
-
<!-- search -->
|
|
408
|
-
<svg viewBox="0 0 18 18" class="svg-search-dims">
|
|
409
|
-
<use xlink:href="#search"></use>
|
|
410
|
-
</svg>
|
|
411
|
-
|
|
412
|
-
</div>
|
|
413
|
-
<h2>search</h2>
|
|
414
|
-
</li>
|
|
415
|
-
<li title="star">
|
|
416
|
-
<div class="icon-box">
|
|
417
|
-
|
|
418
|
-
<!-- star -->
|
|
419
|
-
<svg viewBox="0 0 23 21" class="svg-star-dims">
|
|
420
|
-
<use xlink:href="#star"></use>
|
|
421
|
-
</svg>
|
|
422
|
-
|
|
423
|
-
</div>
|
|
424
|
-
<h2>star</h2>
|
|
425
|
-
</li>
|
|
426
|
-
<li title="star-half">
|
|
427
|
-
<div class="icon-box">
|
|
428
|
-
|
|
429
|
-
<!-- star-half -->
|
|
430
|
-
<svg viewBox="0 0 12 21" class="svg-star-half-dims">
|
|
431
|
-
<use xlink:href="#star-half"></use>
|
|
432
|
-
</svg>
|
|
433
|
-
|
|
434
|
-
</div>
|
|
435
|
-
<h2>star-half</h2>
|
|
436
|
-
</li>
|
|
437
|
-
<li title="triangle-right">
|
|
438
|
-
<div class="icon-box">
|
|
439
|
-
|
|
440
|
-
<!-- triangle-right -->
|
|
441
|
-
<svg viewBox="0 0 13.188 16.956" class="svg-triangle-right-dims">
|
|
442
|
-
<use xlink:href="#triangle-right"></use>
|
|
443
|
-
</svg>
|
|
444
|
-
|
|
445
|
-
</div>
|
|
446
|
-
<h2>triangle-right</h2>
|
|
447
|
-
</li>
|
|
448
|
-
<li title="tumblr">
|
|
449
|
-
<div class="icon-box">
|
|
450
|
-
|
|
451
|
-
<!-- tumblr -->
|
|
452
|
-
<svg viewBox="0 0 9.05 14.44" class="svg-tumblr-dims">
|
|
453
|
-
<use xlink:href="#tumblr"></use>
|
|
454
|
-
</svg>
|
|
455
|
-
|
|
456
|
-
</div>
|
|
457
|
-
<h2>tumblr</h2>
|
|
458
|
-
</li>
|
|
459
|
-
<li title="twitter">
|
|
460
|
-
<div class="icon-box">
|
|
461
|
-
|
|
462
|
-
<!-- twitter -->
|
|
463
|
-
<svg viewBox="0 0 24 24" class="svg-twitter-dims">
|
|
464
|
-
<use xlink:href="#twitter"></use>
|
|
465
|
-
</svg>
|
|
466
|
-
|
|
467
|
-
</div>
|
|
468
|
-
<h2>twitter</h2>
|
|
469
|
-
</li>
|
|
470
|
-
<li title="whatsapp">
|
|
471
|
-
<div class="icon-box">
|
|
472
|
-
|
|
473
|
-
<!-- whatsapp -->
|
|
474
|
-
<svg viewBox="0 0 24 24" class="svg-whatsapp-dims">
|
|
475
|
-
<use xlink:href="#whatsapp"></use>
|
|
476
|
-
</svg>
|
|
477
|
-
|
|
478
|
-
</div>
|
|
479
|
-
<h2>whatsapp</h2>
|
|
480
|
-
</li>
|
|
481
|
-
<li title="youtube">
|
|
482
|
-
<div class="icon-box">
|
|
483
|
-
|
|
484
|
-
<!-- youtube -->
|
|
485
|
-
<svg viewBox="0 0 19 14" class="svg-youtube-dims">
|
|
486
|
-
<use xlink:href="#youtube"></use>
|
|
487
|
-
</svg>
|
|
488
|
-
|
|
489
|
-
</div>
|
|
490
|
-
<h2>youtube</h2>
|
|
491
|
-
</li>
|
|
492
|
-
</ul>
|
|
218
|
+
<h3>A) Inline SVG with embedded sprite</h3>
|
|
219
|
+
<ul>
|
|
220
|
+
|
|
221
|
+
<li title="arrow">
|
|
222
|
+
<div class="icon-box">
|
|
223
|
+
<svg viewBox="0 0 14 8" class="svg-arrow-dims">
|
|
224
|
+
<use xlink:href="#arrow"></use>
|
|
225
|
+
</svg>
|
|
226
|
+
</div>
|
|
227
|
+
<h2>arrow, </h2>
|
|
228
|
+
</li>
|
|
229
|
+
<li title="byline-plus">
|
|
230
|
+
<div class="icon-box">
|
|
231
|
+
<svg viewBox="0 0 15 15" class="svg-byline-plus-dims">
|
|
232
|
+
<use xlink:href="#byline-plus"></use>
|
|
233
|
+
</svg>
|
|
234
|
+
</div>
|
|
235
|
+
<h2>byline-plus, </h2>
|
|
236
|
+
</li>
|
|
237
|
+
<li title="camera">
|
|
238
|
+
<div class="icon-box">
|
|
239
|
+
<svg viewBox="0 0 22 20" class="svg-camera-dims">
|
|
240
|
+
<use xlink:href="#camera"></use>
|
|
241
|
+
</svg>
|
|
242
|
+
</div>
|
|
243
|
+
<h2>camera, </h2>
|
|
244
|
+
</li>
|
|
245
|
+
<li title="chat">
|
|
246
|
+
<div class="icon-box">
|
|
247
|
+
<svg viewBox="0 0 27 24" class="svg-chat-dims">
|
|
248
|
+
<use xlink:href="#chat"></use>
|
|
249
|
+
</svg>
|
|
250
|
+
</div>
|
|
251
|
+
<h2>chat, </h2>
|
|
252
|
+
</li>
|
|
253
|
+
<li title="clock">
|
|
254
|
+
<div class="icon-box">
|
|
255
|
+
<svg viewBox="0 0 35 33" class="svg-clock-dims">
|
|
256
|
+
<use xlink:href="#clock"></use>
|
|
257
|
+
</svg>
|
|
258
|
+
</div>
|
|
259
|
+
<h2>clock, </h2>
|
|
260
|
+
</li>
|
|
261
|
+
<li title="close">
|
|
262
|
+
<div class="icon-box">
|
|
263
|
+
<svg viewBox="0 0 13 12" class="svg-close-dims">
|
|
264
|
+
<use xlink:href="#close"></use>
|
|
265
|
+
</svg>
|
|
266
|
+
</div>
|
|
267
|
+
<h2>close, </h2>
|
|
268
|
+
</li>
|
|
269
|
+
<li title="email">
|
|
270
|
+
<div class="icon-box">
|
|
271
|
+
<svg viewBox="0 0 14 9" class="svg-email-dims">
|
|
272
|
+
<use xlink:href="#email"></use>
|
|
273
|
+
</svg>
|
|
274
|
+
</div>
|
|
275
|
+
<h2>email, </h2>
|
|
276
|
+
</li>
|
|
277
|
+
<li title="envelope">
|
|
278
|
+
<div class="icon-box">
|
|
279
|
+
<svg viewBox="0 0 14 9" class="svg-envelope-dims">
|
|
280
|
+
<use xlink:href="#envelope"></use>
|
|
281
|
+
</svg>
|
|
282
|
+
</div>
|
|
283
|
+
<h2>envelope, </h2>
|
|
284
|
+
</li>
|
|
285
|
+
<li title="facebook">
|
|
286
|
+
<div class="icon-box">
|
|
287
|
+
<svg viewBox="0 0 24 24" class="svg-facebook-dims">
|
|
288
|
+
<use xlink:href="#facebook"></use>
|
|
289
|
+
</svg>
|
|
290
|
+
</div>
|
|
291
|
+
<h2>facebook, </h2>
|
|
292
|
+
</li>
|
|
293
|
+
<li title="fire">
|
|
294
|
+
<div class="icon-box">
|
|
295
|
+
<svg viewBox="0 0 14 19" class="svg-fire-dims">
|
|
296
|
+
<use xlink:href="#fire"></use>
|
|
297
|
+
</svg>
|
|
298
|
+
</div>
|
|
299
|
+
<h2>fire, </h2>
|
|
300
|
+
</li>
|
|
301
|
+
<li title="flipboard">
|
|
302
|
+
<div class="icon-box">
|
|
303
|
+
<svg viewBox="0 0 30 30" class="svg-flipboard-dims">
|
|
304
|
+
<use xlink:href="#flipboard"></use>
|
|
305
|
+
</svg>
|
|
306
|
+
</div>
|
|
307
|
+
<h2>flipboard, </h2>
|
|
308
|
+
</li>
|
|
309
|
+
<li title="gallery">
|
|
310
|
+
<div class="icon-box">
|
|
311
|
+
<svg viewBox="0 0 34.237 31.943" class="svg-gallery-dims">
|
|
312
|
+
<use xlink:href="#gallery"></use>
|
|
313
|
+
</svg>
|
|
314
|
+
</div>
|
|
315
|
+
<h2>gallery, </h2>
|
|
316
|
+
</li>
|
|
317
|
+
<li title="google">
|
|
318
|
+
<div class="icon-box">
|
|
319
|
+
<svg viewBox="0 0 24 24" class="svg-google-dims">
|
|
320
|
+
<use xlink:href="#google"></use>
|
|
321
|
+
</svg>
|
|
322
|
+
</div>
|
|
323
|
+
<h2>google, </h2>
|
|
324
|
+
</li>
|
|
325
|
+
<li title="hamburger">
|
|
326
|
+
<div class="icon-box">
|
|
327
|
+
<svg viewBox="0 0 19.4 14.5" class="svg-hamburger-dims">
|
|
328
|
+
<use xlink:href="#hamburger"></use>
|
|
329
|
+
</svg>
|
|
330
|
+
</div>
|
|
331
|
+
<h2>hamburger, </h2>
|
|
332
|
+
</li>
|
|
333
|
+
<li title="info">
|
|
334
|
+
<div class="icon-box">
|
|
335
|
+
<svg viewBox="0 0 20 20" class="svg-info-dims">
|
|
336
|
+
<use xlink:href="#info"></use>
|
|
337
|
+
</svg>
|
|
338
|
+
</div>
|
|
339
|
+
<h2>info, </h2>
|
|
340
|
+
</li>
|
|
341
|
+
<li title="instagram">
|
|
342
|
+
<div class="icon-box">
|
|
343
|
+
<svg viewBox="0 0 19 19" class="svg-instagram-dims">
|
|
344
|
+
<use xlink:href="#instagram"></use>
|
|
345
|
+
</svg>
|
|
346
|
+
</div>
|
|
347
|
+
<h2>instagram, </h2>
|
|
348
|
+
</li>
|
|
349
|
+
<li title="linkedin">
|
|
350
|
+
<div class="icon-box">
|
|
351
|
+
<svg viewBox="0 0 24 24" class="svg-linkedin-dims">
|
|
352
|
+
<use xlink:href="#linkedin"></use>
|
|
353
|
+
</svg>
|
|
354
|
+
</div>
|
|
355
|
+
<h2>linkedin, </h2>
|
|
356
|
+
</li>
|
|
357
|
+
<li title="pinit">
|
|
358
|
+
<div class="icon-box">
|
|
359
|
+
<svg viewBox="0 0 false false" class="svg-pinit-dims">
|
|
360
|
+
<use xlink:href="#pinit"></use>
|
|
361
|
+
</svg>
|
|
362
|
+
</div>
|
|
363
|
+
<h2>pinit, </h2>
|
|
364
|
+
</li>
|
|
365
|
+
<li title="pinterest">
|
|
366
|
+
<div class="icon-box">
|
|
367
|
+
<svg viewBox="0 0 false false" class="svg-pinterest-dims">
|
|
368
|
+
<use xlink:href="#pinterest"></use>
|
|
369
|
+
</svg>
|
|
370
|
+
</div>
|
|
371
|
+
<h2>pinterest, </h2>
|
|
372
|
+
</li>
|
|
373
|
+
<li title="plus">
|
|
374
|
+
<div class="icon-box">
|
|
375
|
+
<svg viewBox="0 0 false false" class="svg-plus-dims">
|
|
376
|
+
<use xlink:href="#plus"></use>
|
|
377
|
+
</svg>
|
|
378
|
+
</div>
|
|
379
|
+
<h2>plus, </h2>
|
|
380
|
+
</li>
|
|
381
|
+
<li title="pmc-logo">
|
|
382
|
+
<div class="icon-box">
|
|
383
|
+
<svg viewBox="0 0 424.16 55.06" class="svg-pmc-logo-dims">
|
|
384
|
+
<use xlink:href="#pmc-logo"></use>
|
|
385
|
+
</svg>
|
|
386
|
+
</div>
|
|
387
|
+
<h2>pmc-logo, </h2>
|
|
388
|
+
</li>
|
|
389
|
+
<li title="pmc-logo-white">
|
|
390
|
+
<div class="icon-box">
|
|
391
|
+
<svg viewBox="0 0 537.42 69.75" class="svg-pmc-logo-white-dims">
|
|
392
|
+
<use xlink:href="#pmc-logo-white"></use>
|
|
393
|
+
</svg>
|
|
394
|
+
</div>
|
|
395
|
+
<h2>pmc-logo-white, </h2>
|
|
396
|
+
</li>
|
|
397
|
+
<li title="print">
|
|
398
|
+
<div class="icon-box">
|
|
399
|
+
<svg viewBox="0 0 166 166" class="svg-print-dims">
|
|
400
|
+
<use xlink:href="#print"></use>
|
|
401
|
+
</svg>
|
|
402
|
+
</div>
|
|
403
|
+
<h2>print, </h2>
|
|
404
|
+
</li>
|
|
405
|
+
<li title="reddit">
|
|
406
|
+
<div class="icon-box">
|
|
407
|
+
<svg viewBox="0 0 24 24" class="svg-reddit-dims">
|
|
408
|
+
<use xlink:href="#reddit"></use>
|
|
409
|
+
</svg>
|
|
410
|
+
</div>
|
|
411
|
+
<h2>reddit, </h2>
|
|
412
|
+
</li>
|
|
413
|
+
<li title="search">
|
|
414
|
+
<div class="icon-box">
|
|
415
|
+
<svg viewBox="0 0 18 18" class="svg-search-dims">
|
|
416
|
+
<use xlink:href="#search"></use>
|
|
417
|
+
</svg>
|
|
418
|
+
</div>
|
|
419
|
+
<h2>search, </h2>
|
|
420
|
+
</li>
|
|
421
|
+
<li title="star">
|
|
422
|
+
<div class="icon-box">
|
|
423
|
+
<svg viewBox="0 0 23 21" class="svg-star-dims">
|
|
424
|
+
<use xlink:href="#star"></use>
|
|
425
|
+
</svg>
|
|
426
|
+
</div>
|
|
427
|
+
<h2>star, </h2>
|
|
428
|
+
</li>
|
|
429
|
+
<li title="star-half">
|
|
430
|
+
<div class="icon-box">
|
|
431
|
+
<svg viewBox="0 0 12 21" class="svg-star-half-dims">
|
|
432
|
+
<use xlink:href="#star-half"></use>
|
|
433
|
+
</svg>
|
|
434
|
+
</div>
|
|
435
|
+
<h2>star-half, </h2>
|
|
436
|
+
</li>
|
|
437
|
+
<li title="triangle-right">
|
|
438
|
+
<div class="icon-box">
|
|
439
|
+
<svg viewBox="0 0 13.188 16.956" class="svg-triangle-right-dims">
|
|
440
|
+
<use xlink:href="#triangle-right"></use>
|
|
441
|
+
</svg>
|
|
442
|
+
</div>
|
|
443
|
+
<h2>triangle-right, </h2>
|
|
444
|
+
</li>
|
|
445
|
+
<li title="tumblr">
|
|
446
|
+
<div class="icon-box">
|
|
447
|
+
<svg viewBox="0 0 false false" class="svg-tumblr-dims">
|
|
448
|
+
<use xlink:href="#tumblr"></use>
|
|
449
|
+
</svg>
|
|
450
|
+
</div>
|
|
451
|
+
<h2>tumblr, </h2>
|
|
452
|
+
</li>
|
|
453
|
+
<li title="twitter">
|
|
454
|
+
<div class="icon-box">
|
|
455
|
+
<svg viewBox="0 0 24 24" class="svg-twitter-dims">
|
|
456
|
+
<use xlink:href="#twitter"></use>
|
|
457
|
+
</svg>
|
|
458
|
+
</div>
|
|
459
|
+
<h2>twitter, </h2>
|
|
460
|
+
</li>
|
|
461
|
+
<li title="whatsapp">
|
|
462
|
+
<div class="icon-box">
|
|
463
|
+
<svg viewBox="0 0 24 24" class="svg-whatsapp-dims">
|
|
464
|
+
<use xlink:href="#whatsapp"></use>
|
|
465
|
+
</svg>
|
|
466
|
+
</div>
|
|
467
|
+
<h2>whatsapp, </h2>
|
|
468
|
+
</li>
|
|
469
|
+
<li title="youtube">
|
|
470
|
+
<div class="icon-box">
|
|
471
|
+
<svg viewBox="0 0 19 14" class="svg-youtube-dims">
|
|
472
|
+
<use xlink:href="#youtube"></use>
|
|
473
|
+
</svg>
|
|
474
|
+
</div>
|
|
475
|
+
<h2>youtube, </h2>
|
|
476
|
+
</li>
|
|
477
|
+
</ul>
|
|
493
478
|
|
|
494
479
|
<!--
|
|
495
480
|
====================================================================================================
|
|
496
481
|
-->
|
|
497
482
|
|
|
498
|
-
|
|
499
|
-
|
|
483
|
+
</section>
|
|
484
|
+
<section>
|
|
500
485
|
|
|
501
486
|
<!--
|
|
502
|
-
|
|
503
|
-
B) Inline SVG with external sprite (IE 9-11 with polyfill only)
|
|
487
|
+
B) Inline SVG with external sprite
|
|
504
488
|
====================================================================================================
|
|
505
489
|
These SVG images make use of an URL + fragment identifiers (IDs) and refer to the regular external
|
|
506
|
-
SVG sprite. They may be styled via CSS.
|
|
507
|
-
|
|
490
|
+
SVG sprite. They may be styled via CSS.
|
|
508
491
|
-->
|
|
509
492
|
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
<svg viewBox="0 0 24 24" class="svg-reddit-dims">
|
|
771
|
-
<use xlink:href="sprite.defs.svg#reddit"></use>
|
|
772
|
-
</shapes>
|
|
773
|
-
|
|
774
|
-
</div>
|
|
775
|
-
<h2>reddit</h2>
|
|
776
|
-
</li>
|
|
777
|
-
<li title="search">
|
|
778
|
-
<div class="icon-box">
|
|
779
|
-
|
|
780
|
-
<!-- search -->
|
|
781
|
-
<svg viewBox="0 0 18 18" class="svg-search-dims">
|
|
782
|
-
<use xlink:href="sprite.defs.svg#search"></use>
|
|
783
|
-
</shapes>
|
|
784
|
-
|
|
785
|
-
</div>
|
|
786
|
-
<h2>search</h2>
|
|
787
|
-
</li>
|
|
788
|
-
<li title="star">
|
|
789
|
-
<div class="icon-box">
|
|
790
|
-
|
|
791
|
-
<!-- star -->
|
|
792
|
-
<svg viewBox="0 0 23 21" class="svg-star-dims">
|
|
793
|
-
<use xlink:href="sprite.defs.svg#star"></use>
|
|
794
|
-
</shapes>
|
|
795
|
-
|
|
796
|
-
</div>
|
|
797
|
-
<h2>star</h2>
|
|
798
|
-
</li>
|
|
799
|
-
<li title="star-half">
|
|
800
|
-
<div class="icon-box">
|
|
801
|
-
|
|
802
|
-
<!-- star-half -->
|
|
803
|
-
<svg viewBox="0 0 12 21" class="svg-star-half-dims">
|
|
804
|
-
<use xlink:href="sprite.defs.svg#star-half"></use>
|
|
805
|
-
</shapes>
|
|
806
|
-
|
|
807
|
-
</div>
|
|
808
|
-
<h2>star-half</h2>
|
|
809
|
-
</li>
|
|
810
|
-
<li title="triangle-right">
|
|
811
|
-
<div class="icon-box">
|
|
812
|
-
|
|
813
|
-
<!-- triangle-right -->
|
|
814
|
-
<svg viewBox="0 0 13.188 16.956" class="svg-triangle-right-dims">
|
|
815
|
-
<use xlink:href="sprite.defs.svg#triangle-right"></use>
|
|
816
|
-
</shapes>
|
|
817
|
-
|
|
818
|
-
</div>
|
|
819
|
-
<h2>triangle-right</h2>
|
|
820
|
-
</li>
|
|
821
|
-
<li title="tumblr">
|
|
822
|
-
<div class="icon-box">
|
|
823
|
-
|
|
824
|
-
<!-- tumblr -->
|
|
825
|
-
<svg viewBox="0 0 9.05 14.44" class="svg-tumblr-dims">
|
|
826
|
-
<use xlink:href="sprite.defs.svg#tumblr"></use>
|
|
827
|
-
</shapes>
|
|
828
|
-
|
|
829
|
-
</div>
|
|
830
|
-
<h2>tumblr</h2>
|
|
831
|
-
</li>
|
|
832
|
-
<li title="twitter">
|
|
833
|
-
<div class="icon-box">
|
|
834
|
-
|
|
835
|
-
<!-- twitter -->
|
|
836
|
-
<svg viewBox="0 0 24 24" class="svg-twitter-dims">
|
|
837
|
-
<use xlink:href="sprite.defs.svg#twitter"></use>
|
|
838
|
-
</shapes>
|
|
839
|
-
|
|
840
|
-
</div>
|
|
841
|
-
<h2>twitter</h2>
|
|
842
|
-
</li>
|
|
843
|
-
<li title="whatsapp">
|
|
844
|
-
<div class="icon-box">
|
|
845
|
-
|
|
846
|
-
<!-- whatsapp -->
|
|
847
|
-
<svg viewBox="0 0 24 24" class="svg-whatsapp-dims">
|
|
848
|
-
<use xlink:href="sprite.defs.svg#whatsapp"></use>
|
|
849
|
-
</shapes>
|
|
850
|
-
|
|
851
|
-
</div>
|
|
852
|
-
<h2>whatsapp</h2>
|
|
853
|
-
</li>
|
|
854
|
-
<li title="youtube">
|
|
855
|
-
<div class="icon-box">
|
|
856
|
-
|
|
857
|
-
<!-- youtube -->
|
|
858
|
-
<svg viewBox="0 0 19 14" class="svg-youtube-dims">
|
|
859
|
-
<use xlink:href="sprite.defs.svg#youtube"></use>
|
|
860
|
-
</shapes>
|
|
861
|
-
|
|
862
|
-
</div>
|
|
863
|
-
<h2>youtube</h2>
|
|
864
|
-
</li>
|
|
865
|
-
</ul>
|
|
493
|
+
<h3>B) Inline SVG with external sprite</h3>
|
|
494
|
+
<ul>
|
|
495
|
+
|
|
496
|
+
<li title="arrow">
|
|
497
|
+
<div class="icon-box">
|
|
498
|
+
<svg viewBox="0 0 14 8" class="svg-arrow-dims">
|
|
499
|
+
<use xlink:href="sprite.defs.svg#arrow"></use>
|
|
500
|
+
</shapes>
|
|
501
|
+
</div>
|
|
502
|
+
<h2>arrow, </h2>
|
|
503
|
+
</li>
|
|
504
|
+
<li title="byline-plus">
|
|
505
|
+
<div class="icon-box">
|
|
506
|
+
<svg viewBox="0 0 15 15" class="svg-byline-plus-dims">
|
|
507
|
+
<use xlink:href="sprite.defs.svg#byline-plus"></use>
|
|
508
|
+
</shapes>
|
|
509
|
+
</div>
|
|
510
|
+
<h2>byline-plus, </h2>
|
|
511
|
+
</li>
|
|
512
|
+
<li title="camera">
|
|
513
|
+
<div class="icon-box">
|
|
514
|
+
<svg viewBox="0 0 22 20" class="svg-camera-dims">
|
|
515
|
+
<use xlink:href="sprite.defs.svg#camera"></use>
|
|
516
|
+
</shapes>
|
|
517
|
+
</div>
|
|
518
|
+
<h2>camera, </h2>
|
|
519
|
+
</li>
|
|
520
|
+
<li title="chat">
|
|
521
|
+
<div class="icon-box">
|
|
522
|
+
<svg viewBox="0 0 27 24" class="svg-chat-dims">
|
|
523
|
+
<use xlink:href="sprite.defs.svg#chat"></use>
|
|
524
|
+
</shapes>
|
|
525
|
+
</div>
|
|
526
|
+
<h2>chat, </h2>
|
|
527
|
+
</li>
|
|
528
|
+
<li title="clock">
|
|
529
|
+
<div class="icon-box">
|
|
530
|
+
<svg viewBox="0 0 35 33" class="svg-clock-dims">
|
|
531
|
+
<use xlink:href="sprite.defs.svg#clock"></use>
|
|
532
|
+
</shapes>
|
|
533
|
+
</div>
|
|
534
|
+
<h2>clock, </h2>
|
|
535
|
+
</li>
|
|
536
|
+
<li title="close">
|
|
537
|
+
<div class="icon-box">
|
|
538
|
+
<svg viewBox="0 0 13 12" class="svg-close-dims">
|
|
539
|
+
<use xlink:href="sprite.defs.svg#close"></use>
|
|
540
|
+
</shapes>
|
|
541
|
+
</div>
|
|
542
|
+
<h2>close, </h2>
|
|
543
|
+
</li>
|
|
544
|
+
<li title="email">
|
|
545
|
+
<div class="icon-box">
|
|
546
|
+
<svg viewBox="0 0 14 9" class="svg-email-dims">
|
|
547
|
+
<use xlink:href="sprite.defs.svg#email"></use>
|
|
548
|
+
</shapes>
|
|
549
|
+
</div>
|
|
550
|
+
<h2>email, </h2>
|
|
551
|
+
</li>
|
|
552
|
+
<li title="envelope">
|
|
553
|
+
<div class="icon-box">
|
|
554
|
+
<svg viewBox="0 0 14 9" class="svg-envelope-dims">
|
|
555
|
+
<use xlink:href="sprite.defs.svg#envelope"></use>
|
|
556
|
+
</shapes>
|
|
557
|
+
</div>
|
|
558
|
+
<h2>envelope, </h2>
|
|
559
|
+
</li>
|
|
560
|
+
<li title="facebook">
|
|
561
|
+
<div class="icon-box">
|
|
562
|
+
<svg viewBox="0 0 24 24" class="svg-facebook-dims">
|
|
563
|
+
<use xlink:href="sprite.defs.svg#facebook"></use>
|
|
564
|
+
</shapes>
|
|
565
|
+
</div>
|
|
566
|
+
<h2>facebook, </h2>
|
|
567
|
+
</li>
|
|
568
|
+
<li title="fire">
|
|
569
|
+
<div class="icon-box">
|
|
570
|
+
<svg viewBox="0 0 14 19" class="svg-fire-dims">
|
|
571
|
+
<use xlink:href="sprite.defs.svg#fire"></use>
|
|
572
|
+
</shapes>
|
|
573
|
+
</div>
|
|
574
|
+
<h2>fire, </h2>
|
|
575
|
+
</li>
|
|
576
|
+
<li title="flipboard">
|
|
577
|
+
<div class="icon-box">
|
|
578
|
+
<svg viewBox="0 0 30 30" class="svg-flipboard-dims">
|
|
579
|
+
<use xlink:href="sprite.defs.svg#flipboard"></use>
|
|
580
|
+
</shapes>
|
|
581
|
+
</div>
|
|
582
|
+
<h2>flipboard, </h2>
|
|
583
|
+
</li>
|
|
584
|
+
<li title="gallery">
|
|
585
|
+
<div class="icon-box">
|
|
586
|
+
<svg viewBox="0 0 34.237 31.943" class="svg-gallery-dims">
|
|
587
|
+
<use xlink:href="sprite.defs.svg#gallery"></use>
|
|
588
|
+
</shapes>
|
|
589
|
+
</div>
|
|
590
|
+
<h2>gallery, </h2>
|
|
591
|
+
</li>
|
|
592
|
+
<li title="google">
|
|
593
|
+
<div class="icon-box">
|
|
594
|
+
<svg viewBox="0 0 24 24" class="svg-google-dims">
|
|
595
|
+
<use xlink:href="sprite.defs.svg#google"></use>
|
|
596
|
+
</shapes>
|
|
597
|
+
</div>
|
|
598
|
+
<h2>google, </h2>
|
|
599
|
+
</li>
|
|
600
|
+
<li title="hamburger">
|
|
601
|
+
<div class="icon-box">
|
|
602
|
+
<svg viewBox="0 0 19.4 14.5" class="svg-hamburger-dims">
|
|
603
|
+
<use xlink:href="sprite.defs.svg#hamburger"></use>
|
|
604
|
+
</shapes>
|
|
605
|
+
</div>
|
|
606
|
+
<h2>hamburger, </h2>
|
|
607
|
+
</li>
|
|
608
|
+
<li title="info">
|
|
609
|
+
<div class="icon-box">
|
|
610
|
+
<svg viewBox="0 0 20 20" class="svg-info-dims">
|
|
611
|
+
<use xlink:href="sprite.defs.svg#info"></use>
|
|
612
|
+
</shapes>
|
|
613
|
+
</div>
|
|
614
|
+
<h2>info, </h2>
|
|
615
|
+
</li>
|
|
616
|
+
<li title="instagram">
|
|
617
|
+
<div class="icon-box">
|
|
618
|
+
<svg viewBox="0 0 19 19" class="svg-instagram-dims">
|
|
619
|
+
<use xlink:href="sprite.defs.svg#instagram"></use>
|
|
620
|
+
</shapes>
|
|
621
|
+
</div>
|
|
622
|
+
<h2>instagram, </h2>
|
|
623
|
+
</li>
|
|
624
|
+
<li title="linkedin">
|
|
625
|
+
<div class="icon-box">
|
|
626
|
+
<svg viewBox="0 0 24 24" class="svg-linkedin-dims">
|
|
627
|
+
<use xlink:href="sprite.defs.svg#linkedin"></use>
|
|
628
|
+
</shapes>
|
|
629
|
+
</div>
|
|
630
|
+
<h2>linkedin, </h2>
|
|
631
|
+
</li>
|
|
632
|
+
<li title="pinit">
|
|
633
|
+
<div class="icon-box">
|
|
634
|
+
<svg viewBox="0 0 false false" class="svg-pinit-dims">
|
|
635
|
+
<use xlink:href="sprite.defs.svg#pinit"></use>
|
|
636
|
+
</shapes>
|
|
637
|
+
</div>
|
|
638
|
+
<h2>pinit, </h2>
|
|
639
|
+
</li>
|
|
640
|
+
<li title="pinterest">
|
|
641
|
+
<div class="icon-box">
|
|
642
|
+
<svg viewBox="0 0 false false" class="svg-pinterest-dims">
|
|
643
|
+
<use xlink:href="sprite.defs.svg#pinterest"></use>
|
|
644
|
+
</shapes>
|
|
645
|
+
</div>
|
|
646
|
+
<h2>pinterest, </h2>
|
|
647
|
+
</li>
|
|
648
|
+
<li title="plus">
|
|
649
|
+
<div class="icon-box">
|
|
650
|
+
<svg viewBox="0 0 false false" class="svg-plus-dims">
|
|
651
|
+
<use xlink:href="sprite.defs.svg#plus"></use>
|
|
652
|
+
</shapes>
|
|
653
|
+
</div>
|
|
654
|
+
<h2>plus, </h2>
|
|
655
|
+
</li>
|
|
656
|
+
<li title="pmc-logo">
|
|
657
|
+
<div class="icon-box">
|
|
658
|
+
<svg viewBox="0 0 424.16 55.06" class="svg-pmc-logo-dims">
|
|
659
|
+
<use xlink:href="sprite.defs.svg#pmc-logo"></use>
|
|
660
|
+
</shapes>
|
|
661
|
+
</div>
|
|
662
|
+
<h2>pmc-logo, </h2>
|
|
663
|
+
</li>
|
|
664
|
+
<li title="pmc-logo-white">
|
|
665
|
+
<div class="icon-box">
|
|
666
|
+
<svg viewBox="0 0 537.42 69.75" class="svg-pmc-logo-white-dims">
|
|
667
|
+
<use xlink:href="sprite.defs.svg#pmc-logo-white"></use>
|
|
668
|
+
</shapes>
|
|
669
|
+
</div>
|
|
670
|
+
<h2>pmc-logo-white, </h2>
|
|
671
|
+
</li>
|
|
672
|
+
<li title="print">
|
|
673
|
+
<div class="icon-box">
|
|
674
|
+
<svg viewBox="0 0 166 166" class="svg-print-dims">
|
|
675
|
+
<use xlink:href="sprite.defs.svg#print"></use>
|
|
676
|
+
</shapes>
|
|
677
|
+
</div>
|
|
678
|
+
<h2>print, </h2>
|
|
679
|
+
</li>
|
|
680
|
+
<li title="reddit">
|
|
681
|
+
<div class="icon-box">
|
|
682
|
+
<svg viewBox="0 0 24 24" class="svg-reddit-dims">
|
|
683
|
+
<use xlink:href="sprite.defs.svg#reddit"></use>
|
|
684
|
+
</shapes>
|
|
685
|
+
</div>
|
|
686
|
+
<h2>reddit, </h2>
|
|
687
|
+
</li>
|
|
688
|
+
<li title="search">
|
|
689
|
+
<div class="icon-box">
|
|
690
|
+
<svg viewBox="0 0 18 18" class="svg-search-dims">
|
|
691
|
+
<use xlink:href="sprite.defs.svg#search"></use>
|
|
692
|
+
</shapes>
|
|
693
|
+
</div>
|
|
694
|
+
<h2>search, </h2>
|
|
695
|
+
</li>
|
|
696
|
+
<li title="star">
|
|
697
|
+
<div class="icon-box">
|
|
698
|
+
<svg viewBox="0 0 23 21" class="svg-star-dims">
|
|
699
|
+
<use xlink:href="sprite.defs.svg#star"></use>
|
|
700
|
+
</shapes>
|
|
701
|
+
</div>
|
|
702
|
+
<h2>star, </h2>
|
|
703
|
+
</li>
|
|
704
|
+
<li title="star-half">
|
|
705
|
+
<div class="icon-box">
|
|
706
|
+
<svg viewBox="0 0 12 21" class="svg-star-half-dims">
|
|
707
|
+
<use xlink:href="sprite.defs.svg#star-half"></use>
|
|
708
|
+
</shapes>
|
|
709
|
+
</div>
|
|
710
|
+
<h2>star-half, </h2>
|
|
711
|
+
</li>
|
|
712
|
+
<li title="triangle-right">
|
|
713
|
+
<div class="icon-box">
|
|
714
|
+
<svg viewBox="0 0 13.188 16.956" class="svg-triangle-right-dims">
|
|
715
|
+
<use xlink:href="sprite.defs.svg#triangle-right"></use>
|
|
716
|
+
</shapes>
|
|
717
|
+
</div>
|
|
718
|
+
<h2>triangle-right, </h2>
|
|
719
|
+
</li>
|
|
720
|
+
<li title="tumblr">
|
|
721
|
+
<div class="icon-box">
|
|
722
|
+
<svg viewBox="0 0 false false" class="svg-tumblr-dims">
|
|
723
|
+
<use xlink:href="sprite.defs.svg#tumblr"></use>
|
|
724
|
+
</shapes>
|
|
725
|
+
</div>
|
|
726
|
+
<h2>tumblr, </h2>
|
|
727
|
+
</li>
|
|
728
|
+
<li title="twitter">
|
|
729
|
+
<div class="icon-box">
|
|
730
|
+
<svg viewBox="0 0 24 24" class="svg-twitter-dims">
|
|
731
|
+
<use xlink:href="sprite.defs.svg#twitter"></use>
|
|
732
|
+
</shapes>
|
|
733
|
+
</div>
|
|
734
|
+
<h2>twitter, </h2>
|
|
735
|
+
</li>
|
|
736
|
+
<li title="whatsapp">
|
|
737
|
+
<div class="icon-box">
|
|
738
|
+
<svg viewBox="0 0 24 24" class="svg-whatsapp-dims">
|
|
739
|
+
<use xlink:href="sprite.defs.svg#whatsapp"></use>
|
|
740
|
+
</shapes>
|
|
741
|
+
</div>
|
|
742
|
+
<h2>whatsapp, </h2>
|
|
743
|
+
</li>
|
|
744
|
+
<li title="youtube">
|
|
745
|
+
<div class="icon-box">
|
|
746
|
+
<svg viewBox="0 0 19 14" class="svg-youtube-dims">
|
|
747
|
+
<use xlink:href="sprite.defs.svg#youtube"></use>
|
|
748
|
+
</shapes>
|
|
749
|
+
</div>
|
|
750
|
+
<h2>youtube, </h2>
|
|
751
|
+
</li>
|
|
752
|
+
</ul>
|
|
866
753
|
|
|
867
754
|
<!--
|
|
868
755
|
====================================================================================================
|
|
869
756
|
-->
|
|
870
757
|
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
758
|
+
</section>
|
|
759
|
+
<footer>
|
|
760
|
+
<p>Generated at Tue, 31 Oct 2023 19:42:55 GMT by <a href="https://github.com/svg-sprite/svg-sprite" target="_blank" rel="noopener noreferrer">svg-sprite</a>.</p>
|
|
761
|
+
</footer>
|
|
762
|
+
</body>
|
|
876
763
|
</html>
|