Skip to content

This polyfill lets you use URL paths within a <use> element for SVG icons

License

Notifications You must be signed in to change notification settings

timwright12/SVG-Icon-Sprite-Polyfill

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f5be378 · May 26, 2016

History

26 Commits
Oct 28, 2015
Nov 2, 2015
Nov 2, 2015
Oct 29, 2015
Oct 28, 2015
May 26, 2016
Oct 29, 2015

Repository files navigation

SVG Icon Sprite Polyfill

A polyfill for Internet explorer and the SVG USE element.

Article: http://csskarma.com/blog/svg-fragment-identifiers/

Demo: https://timwright12.github.io/SVG-Icon-Sprite-Polyfill/

This polyfill allows you to use:

<svg role="img" aria-label="Describe the icon here" class="icon icon-archive">
	<title>Describe the icon here</title>
	<use xlink:href="img/svg-defs.svg#icon-archive"></use>
</svg>

in Internet Explorer 9+.

Just include the script and it should work.

Your svg-defs.svg file should look like this (repeat the symbol element for each icon):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
			<symbol id="icon-archive" viewBox="0 0 1024 1024">
				<title>Describe the icon here</title>
				<path class="path1" d="[all the data points that draw the image]"></path>
			</symbol>
	</defs>
</svg>

About

This polyfill lets you use URL paths within a <use> element for SVG icons

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published