Multiple SVG icons in one file

Developer
Niels Oeltjen
Size
2,149 Kb
Views
72,864
  1. Multiple SVG icons in one file Previews
  2. Multiple SVG icons in one file HTML Codes
  3. Multiple SVG icons in one file CSS Codes

How do I make an multiple svg icons in one file?

These icons all use the same source file. The correct icon ID is passed via a uri hash to the SVG. JS in the SVG parses location.hash and shows the correct icon.. What is a multiple svg icons in one file? How do you make a multiple svg icons in one file? This script and codes were developed by Niels Oeltjen on 08 September 2022, Thursday.

Multiple SVG icons in one file Previews
IQ Test

Multiple SVG icons in one file - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multiple SVG icons in one file</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://elbone.github.io/cdn/codepen/codepen-default.css#def'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Multiple SVG icons in one file</h2>
<ul> <li> <object data="https://elbone.github.io/cdn/codepen/icon-2.svg#cloud"></object> <span>Cloud</span> </li> <li> <object data="https://elbone.github.io/cdn/codepen/icon-2.svg#rain"></object> <span>Rain</span> </li> <li> <object data="https://elbone.github.io/cdn/codepen/icon-2.svg#sun"></object> <span>Sun</span> </li>
</ul>
<p>These icons all use the same source file. <br /> The correct icon ID is passed via a uri hash to the SVG. <br />
JS in the SVG parses location.hash and shows the correct icon.</p>
<p>See the svg source <a href="https://raw.github.com/Elbone/elbone.github.com/master/cdn/codepen/icon-2.svg" target="blank">here</a></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Multiple SVG icons in one file - Script Codes CSS Codes

ul { margin: 40px;
}
ul li { margin: 20px; display: inline-block;
}
ul li object { float: left; margin-right: 14px;
}
ul li span { line-height: 32px; display: block; float: left; color: #ccc; font-size: 24px;
}
Multiple SVG icons in one file - Script Codes
Multiple SVG icons in one file - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 08, 2022
Rating 3
Size 2,149 Kb
Views 72,864
Do you need developer help for Multiple SVG icons in one file?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Niels Oeltjen (NielsOeltjen) Script Codes
Name
Another nice loader
Expanding text links
SVG icons coloured using js and hash
Prose.io repo icon
Animated css matrix type
Semantic vertical centering
Loading animation
Sweet star loader
Paralax without plugin
Emoji selectors
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!