using-svg-icons.md

layout	title	desc	extra_tutorials	markbot_submit	hide_show_for_marks	goal	fork	download	steps
lesson	Using SVG icons	Use Illustrator & Spritebot to generate some SVG icons and use them in a website.	title url SVG icons slide deck /courses/web-dev-3/svg-icons/ title url Advanced SVG advanced-svg	true	true	image before notes goal.gif We’re going to look at creating an SVG sprite sheet with some icons inside. Then we’ll use the icons on a website in a simple layout. label text Type it, type it real good Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!	url https://github.com/ltw-webdev-3/using-svg-icons	url export_notes https://assets.learntheweb.courses/web-dev-3/using-svg-icons-download.zip We’ll be walking through setting up this Illustrator document together so there’s no need to do anything with it right away.	title before folders after notes Set up project After forking, cloning & downloading we should have a folder structure like this: label type using-svg-icons-lesson folder label type indent prod folder 1 label indent dino-icons.ai 2 label type indent notes using-svg-icons folder 1 This is the cloned GitHub repo label indent index.html 2 label type indent css folder 2 label indent main.css 3 label indent modules.css 3 label type indent images folder 2 1. Make an `index.html` & add the boilerplate code. 2. Make a `main.css` in your `css` folder—it can remain empty. 3. Make a `modules.css` in your `css` folder—[get a new version from Modulifier](https://modulifier.web-dev.tools/). **Make sure to press “Select All”.** 4. Make an `images` folder. label text Naming conventions Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). label text HTML snippets Create the boilerplate with `html5`, `viewport`, `css` title before Organize the Illustrator file The first step to using SVG icons is to organize the Illustrator document so it can be exported properly. For icons, the way we export is no different from standard SVGs: resize & name the artboards. Open up the Illustrator file and you should see this:  Our first step is to create multiple artboards—**each artboard should be `256px` × `256px`**  Move the dinosaur icons so that they are on individual artboards. I resized each icon to be `252px` wide. I named each artboard this: 1. `brachiosaurus` 2. `micropachycephalosaurus` 3. `velociraptor`  The final change we need to make is the `fill`. Since we’re interested in colouring the icons in our CSS and want to have different hover colours we need to remove the fill colours in Illustrator.  The simplest way to remove fill colours when exporting from Illustrator is to set all their colours to black—absolute black, `#000000`. The default `fill` in SVG is black, so the optimizer will leave the fill off. **Of course you could remove the fill colour in Illustrator but then you wouldn’t be able to see the graphic and that’s just annoying.** *If you want differently coloured or multi-coloured icons then leave the fill.* title before notes Export the SVGs We’re ready to export our SVGs from Illustrator now. Go to: ``` File > Export > Export for Screens… ``` Assuming you’ve exported using “Export for Screens” before there shouldn’t really be any settings we need to change. [If you haven’t used “Export for Screens” before, see this tutorial.](/topics/image-formats/#export-for-screens)  **Be sure to set the correct output location: the `images` folder inside your `using-svg-icons` folder.** label text Keyboard shortcut Export for screens: `⌥⌘E` title before folders after Generate a sprite sheet We should now have 3 completely separate SVG files in our SVG folder, looking like this: continue true label type using-svg-icons folder label indent fade index.html 1 true label type indent fade css folder 1 true label type indent images folder 1 label indent brachiosaurus.svg 2 label indent micropachycephalosaurus.svg 2 label indent velociraptor.svg 2 Drop all 3 of the images into [**Spritebot**](https://github.com/thomasjbradley/spritebot)—which will compress and optimize the images for us.  When Spritebot is ready we want to merge all the SVGs into a single file. This is called a sprite sheet. The benefit is performance: less downloads & faster websites.  After we’ve created & saved the sprite sheet, the original SVG graphics are useless—delete them. Now we’re ready to use the icons in our HTML! title before code_lang code_file code lines after Write the HTML code Let’s write out the HTML we need to show the icons. For this quick example we’ll use a list and some links. html index.html ⋮ </head> <body> <ul class="list-group-inline"> <li class="center-text"> <a class="block" href="#"> <i class="icon i-96"> <svg><use xlink:href="images/dino-icons.svg#brachiosaurus"></use></svg> </i> <span class="block icon-text">Brachiosaurus</span> </a> </li> <!-- Add all the other <li> tags here--> </ul> </body> </html> num fade 2-3 true num text 8 We’ll use the `<i>` tag and the `.icon` class to define the box surrounding our SVG icons. num text 9 Now the `<svg>` tag. Inside it we have a `<use>` tag that points to our image. The `xlink:href=""` attribute on a `<use>` tag is comparable to the `src=""` attribute on an `<img>` tag. There are a few important parts to look at: 1. `images/dino-icons.svg` — this is the path to the sprite sheet image file. 2. The `#brachiosaurus` is the ID that Spritebot assigned the icon within the sprite sheet. The icon’s ID always matches it’s filename. **Make sure you spell the ID properly in the `xlink:href=""`—Spritebot always makes the ID the same as the original filename you used to generate the sprite sheet.** Go ahead and put 2 more `<li>` tags into the code for each of the two other icons: - `#micropachycephalosaurus` - `#velociraptor` title before Preview in browser with “localhost” Now let’s load it up in our browser and see the icons.  *Or not…* If you’re using Firefox or Safari the icons should load right away. Chrome has tighter security restrictions and requires us to use a web server to see the icons. Luckily, Markbot has a web server built into it for use during our web development.  Press the “Browse Website” toolbar button or, in the `File` menu, go to `Browse Local Website` (`⌘B`)—this will pop open your default browser with the URL to your project running over with a web server. The URL will most likely be: [**https://localhost:8000/**](https://localhost:8000/).  Next up we’ll see a security error about the connection not being private. The browser doesn’t believe the HTTPS certificate Markbot uses is secure because it wasn’t signed by an authority. **You should never bypass this error message on websites.** In this situation it’s okay because we’re loading our “localhost” testing server. So, click “ADVANCED”.  Then click “Proceed to localhost (unsafe)”.  Now we should see our icons! title before code_lang code_file code after Add colours & hovers Our icons are currently using the default link colours: blue & purple. (If you click on them they should all go purple.) So let’s add a little touch of CSS to colour the links better. css css/main.css a { color: #76a500; } a:hover { color: #acc300; } A real basic green colour and a slightly different hover green. Test it out—should work great.