Update README.md

19dev · Jun 29, 2017 · 2bf7471 · 2bf7471
1 parent 377d272
commit 2bf7471
Showing 1 changed file with 55 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,60 @@
 # SVG for Everybody
 
+Usage
+
+1. Select icon and download svg at https://icomoon.io/app/#/select/image
+2. save svg file. Etc. map.svg
+3. Use it
+
+```html
+<!-- https://jonathantneal.github.io/svg4everybody/demo.svg -->
+<script src="https://jonathantneal.github.io/svg4everybody/svg4everybody.legacy.min.js"></script>
+
+<script>
+if (location.hash !== '#nofill') {
+	svg4everybody();
+}
+</script>
+
+<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
+	<!-- icomoon.io -->
+	<symbol id="codepen" viewBox="0 0 64 64">
+		<title>CodePen</title>
+		<path etc.../>
+	</symbol>
+	<symbol id="youtube" viewBox="0 0 64 64">
+		<title>YouTube</title>
+		<path etc.../>
+	</symbol>
+	<symbol id="twitter" viewBox="0 0 64 64">
+		<title>Twitter</title>
+		<path etc.../>
+	</symbol>
+	<symbol id="eye" viewBox="0 0 512 512">
+		<path d="M256 96c-111.659 0-208.441 65.021-256 160 47.559 94.979 144.341 160 256 160 111.657 0 208.439-65.021 256-160-47.558-94.979-144.343-160-256-160zm126.225 84.852c30.081 19.187 55.571 44.887 74.718 75.148-19.146 30.261-44.638 55.961-74.719 75.148-37.797 24.109-81.445 36.852-126.224 36.852-44.78 0-88.428-12.743-126.225-36.852-30.08-19.187-55.57-44.887-74.717-75.148 19.146-30.262 44.637-55.962 74.717-75.148 1.959-1.25 3.938-2.461 5.929-3.65-4.979 13.664-7.704 28.411-7.704 43.798 0 70.691 57.308 128 128 128 70.692 0 128-57.309 128-128 0-15.387-2.725-30.134-7.704-43.799 1.99 1.189 3.969 2.401 5.929 3.651zm-126.225 24.148c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48z"/>
+	</symbol>  
+</svg>
+
+<svg title="Pencil" role="img">
+	<use xlink:href="demo.svg#pencil"/>
+</svg>
+
+<svg role="presentation">
+  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#eye"></use>
+</svg>
+
+<svg role="img" title="CodePen">
+	<img src="map.svg.codepen.png">
+</svg>
+<svg role="img" title="YouTube">
+	<img src="map.svg.youtube.png">
+</svg>
+<svg role="img" title="Twitter">
+	<img src="map.svg.twitter.png">
+</svg>
+```
+
+# Orginal
 [![NPM Version][npm-img]][npm] [![Build Status][ci-img]][ci]
 
 [SVG for Everybody] adds [SVG External Content] support to [all browsers].