Skip to content

Instantly share code, notes, and snippets.

@beatrizsmerino
Last active January 27, 2021 16:44
Show Gist options
  • Save beatrizsmerino/cf3f2f603b23a4de0df57b08b4e2ba50 to your computer and use it in GitHub Desktop.
Save beatrizsmerino/cf3f2f603b23a4de0df57b08b4e2ba50 to your computer and use it in GitHub Desktop.
Insert file sprites.svg with the icons to the end of the all html files
/*
* COMPONENTS
* sprites
* =================================================
*/
/**
* @function printSprites
* @description Insert file sprites.svg with the icons to the end of the all html files
*/
function printSprites() {
const url = '../../images/icons/sprites.svg';
const className = 'sprite';
const getContentFile = async(urlFile) => {
const getData = await fetch(urlFile);
const data = await getData.text();
return data;
};
getContentFile(url).then((data) => {
const contentSprites = document.createElement('div');
contentSprites.setAttribute('class', className);
document.querySelector('body').appendChild(contentSprites);
contentSprites.insertAdjacentHTML('beforeend', data);
});
}
(function() {
printSprites();
}());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Sprites
</title>
</head>
<body>
<svg class="icon icon-menu">
<use xlink:href="#icon-menu" href="#icon-menu"></use>
</svg>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 20 20" id="icon-menu">
<path d="M16.4 9H3.6c-.552 0-.6.447-.6 1s.048 1 .6 1h12.8c.552 0 .6-.447.6-1s-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1s.048 1 .6 1h12.8c.552 0 .6-.447.6-1s-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1s-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1s.048 1 .6 1z"></path>
</symbol>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment