Home Explore Help
Sign In
mirror
/
material-design-icons
Watch 2
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: ac6812576b
Branches Tags
material-des...
/
sprites
/
svg-sprite
/
svg-sprite-alert.html

svg-sprite-alert.html 8.1 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. 	<head>
    4. 

  4. 		<meta charset="utf-8" />
    5. 

  5. 		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
    6. 

  6. 		<script src="https://rawgit.com/jonathantneal/svg4everybody/master/svg4everybody.js"></script>
    7. 

  7. 		<title>SVG sprite preview | svg-sprite</title>
    8. 

  8. 		<style>@charset "UTF-8";body{padding:0;margin:0;color:#666;background:#fafafa;font-family:Arial,Helvetica,sans-serif;font-size:1em;line-height:1.4}header{display:block;padding:3em 3em 2em 3em;background-color:#fff}header p{margin:2em 0 0 0}section{border-top:1px solid #eee;padding:2em 3em 0 3em}section ul{margin:0;padding:0}section li{display:inline;display:inline-block;background-color:#fff;position:relative;margin:0 2em 2em 0;vertical-align:top;border:1px solid #ccc;padding:1em 1em 3em 1em;cursor:default}.icon-box{margin:0;width:144px;height:144px;position:relative;background:#ccc url(data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=) top left repeat;border:1px solid #ccc;display:table-cell;vertical-align:middle;text-align:center}.icon{display:inline;display:inline-block}h1{margin-top:0}h2{margin:0;padding:0;font-size:1em;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;left:1em;right:1em;bottom:1em}footer{display:block;margin:0;padding:0 3em 3em 3em}footer p{margin:0;font-size:.7em}footer a{color:#0f7595;margin-left:0}</style>
    9. 

  9. 		
    10. 

  10. <!--
    11. 

  11. 	
    12. 

  12. Sprite image dimensions
    13. 

  13. ====================================================================================================
    14. 

  14. You will need to set the sprite image dimensions via CSS when you use them as inline SVG, otherwise
    15. 

  15. they would become a huge 100% in size. You may use the following dimension classes for doing so.
    16. 

  16. They might well be outsourced to an external stylesheet of course.
    17. 

  17. 

  18. -->
    19. 

  19. <style type="text/css">
    20. 

  20. 	.svg-ic_error_24px-dims { width: 24px; height: 24px; }
    21. 

  21. 	.svg-ic_warning_24px-dims { width: 24px; height: 24px; }
    22. 

  22. </style>
    23. 

  23. <!--
    24. 

  24. ====================================================================================================
    25. 

  25. -->
    26. 

  26. 

  27. 	</head>
    28. 

  28. 	<body>
    29. 

  29. 	
    30. 

  30. <!--
    31. 

  31. 	
    32. 

  32. Inline SVG sprite
    33. 

  33. ====================================================================================================
    34. 

  34. This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere
    35. 

  35. below within this document. Please see https://github.com/jkphl/svg-sprite#inline-embedding for
    36. 

  36. further details on how to create this embeddable sprite variant.
    37. 

  37. 

  38. -->
    39. 

  39. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
    40. 

  40. 	<defs>
    41. 

  41. 		<svg width="24" height="24" viewBox="0 0 24 24" id="ic_error_24px" y="0"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>		<svg width="24" height="24" viewBox="0 0 24 24" id="ic_warning_24px" y="24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>	</defs>
    42. 

  42. </svg><!--
    43. 

  43. ====================================================================================================
    44. 

  44. -->
    45. 

  45. 		
    46. 

  46. 		<header>
    47. 

  47. 			<h1>SVG sprite preview</h1>
    48. 

  48. 			<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>
    49. 

  49. 			<ul>
    50. 

  50. 				<li>Your browser has to <a href="http://caniuse.com/svg-html5" target="_blank">support inline SVG</a> for these techniques to work.</li>
    51. 

  51. 				<li>The embedded sprite (A) slightly differs from the generated external one. Please <a href="https://github.com/jkphl/svg-sprite#inline-embedding" target="_blank">see the documentation</a> for details on how to create such an embeddable sprite.</li>
    52. 

  52. 				<li>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 <a href="https://github.com/jonathantneal/svg4everybody" target="_blank">SVG for Everybody</a>.</li>
    53. 

  53. 			</ul>
    54. 

  54. 		</header>
    55. 

  55. 		<section>
    56. 

  56. 

  57. <!--
    58. 

  58. 	
    59. 

  59. Inline SVG with embedded sprite
    60. 

  60. ====================================================================================================
    61. 

  61. These SVG images make use of fragment identifiers (IDs) and are extracted out of the inline sprite
    62. 

  62. embedded above. They may be styled via CSS.
    63. 

  63. -->
    64. 

  64. 			<h3>A) Inline SVG with embedded sprite</h3>
    65. 

  65. 			<ul>
    66. 

  66. 

  67. 				<li title="ic_error_24px">
    68. 

  68. 					<div class="icon-box">
    69. 

  69. 						
    70. 

  70. 						<!-- ic_error_24px -->
    71. 

  71. 						<svg viewBox="0 0 24 24" class="svg-ic_error_24px svg-ic_error_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    72. 

  72. 							<use xlink:href="#ic_error_24px"></use>
    73. 

  73. 						</svg>
    74. 

  74. 						
    75. 

  75. 					</div>
    76. 

  76. 					<h2>ic_error_24px</h2>
    77. 

  77. 				</li>
    78. 

  78. 				<li title="ic_warning_24px">
    79. 

  79. 					<div class="icon-box">
    80. 

  80. 						
    81. 

  81. 						<!-- ic_warning_24px -->
    82. 

  82. 						<svg viewBox="0 24 24 24" class="svg-ic_warning_24px svg-ic_warning_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    83. 

  83. 							<use xlink:href="#ic_warning_24px"></use>
    84. 

  84. 						</svg>
    85. 

  85. 						
    86. 

  86. 					</div>
    87. 

  87. 					<h2>ic_warning_24px</h2>
    88. 

  88. 				</li>
    89. 

  89. 			</ul>
    90. 

  90. <!--
    91. 

  91. ====================================================================================================
    92. 

  92. -->
    93. 

  93. 

  94. <!--
    95. 

  95. 	
    96. 

  96. Inline SVG with external sprite
    97. 

  97. ====================================================================================================
    98. 

  98. These SVG images make use of an URL + fragment identifiers (IDs) and refer to the regular external
    99. 

  99. SVG sprite. They may be styled via CSS. (IE 9-11 with polyfill only)
    100. 

  100. -->
    101. 

  101. 			<h3>B) Inline SVG with external sprite (IE 9-11 with polyfill only)</h3>
    102. 

  102. 			<ul>
    103. 

  103. 				
    104. 

  104. 				<li title="ic_error_24px">
    105. 

  105. 					<div class="icon-box">
    106. 

  106. 						
    107. 

  107. 						<!-- ic_error_24px -->
    108. 

  108. 						<svg viewBox="0 0 24 24" class="svg-ic_error_24px svg-ic_error_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    109. 

  109. 							<use xlink:href="svg/sprite.svg#ic_error_24px"></use>
    110. 

  110. 						</svg>
    111. 

  111. 						
    112. 

  112. 					</div>
    113. 

  113. 					<h2>ic_error_24px</h2>
    114. 

  114. 				</li>
    115. 

  115. 				<li title="ic_warning_24px">
    116. 

  116. 					<div class="icon-box">
    117. 

  117. 						
    118. 

  118. 						<!-- ic_warning_24px -->
    119. 

  119. 						<svg viewBox="0 24 24 24" class="svg-ic_warning_24px svg-ic_warning_24px-dims" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    120. 

  120. 							<use xlink:href="svg/sprite.svg#ic_warning_24px"></use>
    121. 

  121. 						</svg>
    122. 

  122. 						
    123. 

  123. 					</div>
    124. 

  124. 					<h2>ic_warning_24px</h2>
    125. 

  125. 				</li>
    126. 

  126. 			</ul>
    127. 

  127. <!--
    128. 

  128. ====================================================================================================
    129. 

  129. -->
    130. 

  130. 		</section>
    131. 

  131. 		<footer>
    132. 

  132. 			<p>Generated at Wed, 12 Nov 2014 20:00:29 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
    133. 

  133. 		</footer>
    134. 

  134. 	</body>
    135. 

  135. </html>
    136. 

  136.