SVG Icons Tutorial - A Look at Vivid.js

With the constantly-changing "norm" for the stunning appearance of your site, it can frequently be difficult to adapt to what users perceive as beautiful. As a result, effective minimalist symbolism is more needed than ever, which is why the creators of vivid.js have created a vast library of customizable SVG elements that you can implement directly into your site. 

In today's lesson, we'll be going in-depth on how you can use vivid.js for your site by covering:

• Installation of the JS library
• Implementation of the icons into your site
• Customization of the icons regarding scaling, coloring, etc

So, without any further delay, let's dive right in!

(if you'd like to get more info on vivid.js, be sure to visit the official site and check out Gary Simon's vivid.js project on GitHub)

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Installing Vivid.js via NPM

As always, before getting into the project, you'd need to install Vivid.js. In order to do this, you'd need to have node.js installed into your command line interface (if you haven't done so already, be sure to download it and follow the steps by clicking this link)

After node.js is installed, go into your CLI and type the following in to make a project folder:

> mkdir svgiconpackage && cd svgiconpackage

After you cd into the name of your folder, just run the command npm init -y, which would allow you to automate saying yes to the specified prompts. If everything goes successfully, you should be able to hit type in code . to open the JS library in Visual Studio:

> code .

Getting Started...

To make this as simple as possible, I'll provide a chronological list of the steps you need in order to get going:

1. After Visual Studio opens up, you should be able to access a package.json file. If that was successful, create a new file titled index.html.
2. Gary frequently uses demo HTML in order to get going, which will be directly implanted into the file you're in if you type in an exclamation point and then hit enter. Leave that as is for now:

  3. Return to the console and begin the installation process for the icons. In the video, Gary uses NPM to install the icons, but you can check out different formats by visiting the vivid.js website and heading to the docs section. You'll find installation methods in the installation section of the docs. Since we're using NPM for this example, just copy the code from there, return to your command line, and input it. I'd also recommend saving it by adding --save to the end of the command:

npm install vivid-icons --save

4. After you hit enter and the installation is completed, return to the index.html file that you made back in step 2. From there, underneath line 7, type in the following code to add the icon library in order to add the installed library into your code:

<script src="node_modules/vivid-icons/dist/vivid-icons.min.js></script>

5. After including that code, reference a (currently nonexistent) CSS file directly above it by inputting the following code:

<link rel="stylesheet" href="main.css">

Testing Out the Library in your Browser

By now, if you've followed all the specified steps, you should have everything installed and all the code that I gave you written (so far). Now, it's time to test this library out in a browser. Once again, I'll provide you a chronological list of steps:

1. If you've installed vivid.js onto your computer and everything functioned properly, you should have access to all the SVG icons that came with the installation. For this step, all we'll be doing is testing out the library with just one of those icons. You can use whatever one you'd like, but for the sake of the tutorial, I'll be using the one that resembles a home, titled "home". To run this icon in your browser, just add the following code in the body section of your HTML:

<i data-vi="home"></i>

2. After you've written that code, you're ready to run! Just find the index.html file on the left panel of the Visual Studio interface, right-click, and hit "reveal in explorer". This should allow you to open a browser window with a tiny home icon on the top left:

(In the video where Gary did this demonstration, he acknowledges how this icon can also "infinitely scale". Since it's a vector icon, there's no pixelation if you zoom in, so you can use it via any size.) 

Congrats! If you've gone this far, you're on your way to becoming a master with vivid.js! Now, things are gonna get a bit more interesting...

Going More In-Depth

Now that you've run your first vivid.js project in the browser, it's time to experiment with the real power of the JS library. In the initial tutorial video for this library, Gary demonstrates this by creating a basic interface out of different icons. You'll see what I mean once we dive into creating this simple project, which I'll show you how to do by, once again, chronologically listing out and describing the steps:

1. Before anything else, it's important to do a bit of outlining with the <ul> and <li> tags. For this step, in the body section of your code, keep what you had from when we ran the home icon and add the following:

<ul>
<li>
<i data-vi="home"></i>
<a href="#">Home</a> <!–– this is what we ran for the home icon-->
</li>
</ul>

In this code, along with keeping the information that runs the home icon, I also added tags for unordered and ordered lists to organize the data, along with an href that displays text with info on what you're clicking on. 

2. Now, it's time to put some more icons into your code to create what would essentially be a beautifully-designed UI. You can do this easily by copy-pasting the code from step one and just customizing what icons you want to use. For instance, if you wanted to have an option on your site to visit the settings area, you could just replace the text in between the quotes on line 3 with "cog", which is the name of the icon in the vivid.js library that represents an image of a cog. You can also replace the "Home" text in line 4 with "settings", as I've demonstrated below:

<ul>
<li>
<i data-vi="cog"></i>
<a href="#">Settings</a> 
</li>
</ul>

Yep, it's that simple!

3. Once you have a few ideas for what options you should have in a UI, you can type out something like what I've got below:

<ul>

<li>
<i data-vi="home"></i>
<a href="#">Home</a> <!–– this is what we ran for the home icon-->
</li>

<li>
<i data-vi="graphy-poly"></i>
<a href="#">Stats</a> <!–– this is what we ran for the home icon-->
</li>

<li>
<i data-vi="cog"></i>
<a href="#"Settings</a> <!–– this is what we ran for the home icon-->
</li>

<li>
<i data-vi="pen"></i>
<a href="#">Contact</a> <!–– this is what we ran for the home icon-->
</li>

</ul>

4. Once you've got that down, you can return to the browser window where you ran your first icon, refresh, and you should be presented with a very simple interface:

By "very simple", I am, of course, referring to the fact that it's quite ugly-looking at the moment, but that will change very soon...

Adding Style To Your Icons

So, by now, you've created a very stripped-down version of a UI with a few icons that are associated with different things. Although it's a step up from when you displayed just a single icon on your screen, it's far from being a good-looking UI, which is why it's now time to add some CSS into the mix. This phase has several primary steps associated with its implementation:

1. Before anything else, create a main.css file from where all your CSS code will be written. 
2. Now, it's time for the fun part! In the tutorial, Gary pasted in some CSS that he prepared before the tutorial, and since that CSS isn't correlated with vivid.js, he decided not to waste too much time talking about it. That's why he just provided all that code to you, which you can copy-paste below:

body {
    background: #f1f1f1
    padding: 4em;
    font-family: 'Montserrat';
}

a {
    text-decoration: none;
    margin-left: 15 px;
    color: rgb(15, 129, 223);
}

ul {
    list-style-type: none;
    background: #fff;
    border-radius: 8px;
    padding: 1em 2em 2em 2em;
}
svg {
    top: 15px;
    position:relative;
}
span {
     margin-top: -40px;
     display:inline-block;
}

3. After you have this CSS applied to your browser page, the UI should at least be a bit more good-looking. All you need to do to see the changes is to just refresh the tab that you ran your code in last time. As you'd see, the design issue had been resolved, at least in terms of this minor project:

Now, we're down to tackling our last bullet point; customizability. 

How Can You Customize the SVG Icons?

Not only does Vivid.js give you access to a vast quantity of free icons that you can use for your site, but it also has customizability features. The documentation points out how you can customize both the default color and size of your icons, which can come in quite handy!

Let's say that you wanted to customize the color of your icons. The icons that are displayed on Vivid.js are, by default, yellow, however, a lot of them could have two other colors that help make the overall design more beautiful. Although this could serve as an advantage when it comes to the appearance of your site, it could also make it difficult for you to change the colors of the icons in order to fit your site's colors, especially if you've introduced a lot of icons into your site.

In order to prevent you from performing unnecessary manual tasks when changing your icon colors or sizes, I've created two different lists that will teach you how to both customize a specific icon and an entire set. 

We'll start by identifying how to customize a specific icon:

1. Return to your index.html file and identify what icon you want to customize.
2. Take a quick look at the Vivid.js docs, which offers information on how you can customize both size and color. According to the docs, you can use the attribute of data-vi-size in order to customize your icon's size, and use a certain attribute for color customization depending on whether you're modifying the primary color, accent color, or prop color. 
3. If you wanted to change, say, the primary color of the "home" icon, just add data-vi-primary, along with the hex code to the line of code where the home icon is featured, as I show in the example below:

<i data-vi="home" data-vi-primary="#red"></i>

By typing in the code shown above, you should be able to see your home icon change color after hitting refresh:

This process would be very similar when you're customizing the size of an icon as well. Just use the data-vi-size attribute instead. 

Now, let's see how we can customize all our icons at once:

1. In your Visual Studio editor, there should be a folder on your left titled node_modules. Click on that folder to expand it and scroll down until you see vivid-icons. From there, click on src and then config.js:

2. Once you reach config.js, there should be info on the default size of all your icons, a primary color, accent color, and prop color:

From here, you can modify any of the values. For the sake of this tutorial, the only change that was made was to the primary color:

If you'd like, feel free to tinker with the size and color, however, the changes you make there aren't savable yet.

3. In order to save your widespread changes, right click on the config.js file on the left panel and then select "open in command prompt", which should open the Visual Studio command prompt. Before running a command, there's an extra step required for Windows users. Since Gary was using a Windows for this project, he needed to go over to the package.json file and find a line of code that said:

"open-html": "open ./dist/preview.html",

If you are a Windows user, change this line to:

"open-html": "start ./dist/preview.html",

4. After taking care of that, you'll need to run a few commands in the command prompt, with the first one being the one below (you'll only need to run this command once, and don't have to retype it for future projects):

> npm i npm-run-all

5. After you've run that command, one final step is required. Just run this command and you'll be all set:

> npm run build

Now, a new window should open featuring a series of icons that have the features you've specified as the default ones. You can see how the initial set of icons and the new set vary:

In the tutorial, the initial set of icons had a widespread primary color of yellow:

This is the new set, which, as you can see, displays a different primary color for the icons:

Based on the information specified in that window, it should also affect all of the icons in the UI project that you've created earlier:

Once you are able to get to this point, you can officially call yourself a Vivid master!

Wrapping It All Up

If you've followed along with this tutorial, you would have obtained a vast amount of info on how you can implement a javascript library known as Vivid.js into your site. From installation to customization, you are now ready to take this library and use it to make your website beautiful by adding that extra layer of design to it!

If you're ever willing to review the content from this article, always feel free to bookmark it or clip it using Evernote, since you can't master this content just by reading it. Implementation and revisitation are two crucial aspects when it comes to the mastery of any concept, but whatever you choose to do with this info, I hope that you can take advantage of it in the best way possible!