ronan / material-design-icons

Commit 92b4bd641097536c206968be1c8d0a6551f95c36

Authored by Addy Osmani over 9 years ago

Add section on SVG Sprites

Showing 1 changed file with 33 additions and 6 deletions

README.md

...	...	@@ -35,6 +35,10 @@
35	35	$ npm install material-design-icons
36	36	```
37	37
	38	+## Usage
	39	+
	40	+Take a look at the included `index.html` file for a preview of all icons included in the set. You are free to use the icons in the way that makes most sense to your project.
	41	+
38	42	## Structure
39	43
40	44	### Icons
41	45
42	46
...	...	@@ -51,14 +55,12 @@
51	55
52	56	### Spritesheets
53	57
54		-Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the `sprites` directory, under the `svg-sprite` and `css-sprite` sub-directories.
	58	+Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the `sprites` directory, under `svg-sprite` and `css-sprite`.
55	59
56	60	#### Using CSS Sprites
57	61
58		-To use a CSS spritesheet, reference the stylesheet for the icon category you wish to use, then include the icon definition in your markup.
	62	+To use a CSS spritesheet, reference the stylesheet for the icon category you wish to use, then include the icon definition in your markup. E.g to use one of the play icons in `css-sprite-av`:
59	63
60		-E.g: to use one of the play icons in `css-sprite-av`, we would do the following:
61		-
62	64	Reference the stylesheet:
63	65
64	66	```html
65	67
66	68
67	69
...	...	@@ -81,11 +83,36 @@
81	83
82	84	Don't forget to publish the corresponding CSS and SVG/PNG files when deploying your project.
83	85
	86	+#### Using SVG Sprites
84	87
	88	+Similarly, to use an SVG spritesheet, reference the stylesheet for the icon category, then include the icon definition in your markup.
85	89
86		-## Usage
	90	+E.g: to use one of the play icons in `svg-sprite-av`, reference the stylesheet:
87	91
88		-Take a look at the included `index.html` file for a preview of all icons included in the set. You are free to use the icons in the way that makes most sense to your project.
	92	+```html
	93	+ <link href="svg-sprite/svg-sprite-av.css" rel="stylesheet">
	94	+```
	95	+
	96	+Create an element which will use the icon as a background:
	97	+
	98	+```html
	99	+ <div></div>
	100	+```
	101	+
	102	+Next, make sure to set a dimension for the icon. This can either be done inline or via a class. We'll use a class for this example:
	103	+
	104	+```html
	105	+ <style>
	106	+ .svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; }
	107	+ </style>
	108	+```
	109	+
	110	+Finally, set the dimension and specific icon `svg-ic_play_circle_outline_24px`, which you can get from the above stylesheet.
	111	+
	112	+```html
	113	+ <div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims"></div>
	114	+```
	115	+
89	116
90	117	## Licence
91	118