![]() In the example I created for this tutorial, my looked like this: Once you have done this, all you need to do is use the standard component, but reference the path to your custom SVG: If you are not using Ionic then it does not necessarily have to be in the assets folder, it will just need to be in some kind of static resources folder that you can reference from your templates. First, make sure that you place the SVG somewhere in the assets folder for your application. Once you have your SVG, using it with Ionicons is extremely simple. NOTE: Just focus on the first part of the video that walks through the creation of the SVG, the rest of the video is irrelevant to this tutorial and uses an older version of Ionic. ![]() For a walkthrough of creating an SVG in Adobe Illustrator you can watch this video that I filmed a while ago to demonstrate: In your program of choice, you will need to create your vector image and then save it in the SVG file format. One program commonly used to create vector images is Adobe Illustrator, but there are also other alternatives. ![]() Therefore, most people will use an image editing program to create the SVG for them. You could code the SVG manually using elements like, , and, but for more complicated vector graphics it becomes quite hard to create the image you want by writing the code yourself. The sizes change but the overall shape stays the same, and we have all the information required to display this image with 100% clarity at any size. This format more generically defines the shape of the image you are creating, this SVG could just as easily be scaled up to 20000px. It's important to understand that these are coordinates, this SVG is not a circle with a radius of 40px inside of a 100px container. The center of the circle would have an x-coordinate of 50, a y-coordinate of 50, and a radius of 40. This would create a yellow circle with a green outline. This is a simple SVG for a circle in the documentation provided by W3Schools. SVGs are defined by using an XML format that looks like this: The difference between vector based graphics and raster (pixel) based graphics, is that vector graphics are defined mathematically and can be scaled to any resolution without losing quality. An SVG is just an image defined in the SVG file format, which stands for Scalable Vector Graphics. If you do intend to create your own SVG icon, then you will need to know a little bit more about what an SVG actually is. This makes icons in Ionic infinitely extensible, because there are already so many professionally designed SVG icons available, and you can easily use any of those with Ionicons. Of course, you don't have to create it yourself, as long as you have the rights to use it you can use any SVG you would like. We're going to quickly cover how you would go about creating your own SVG to use with Ionicons. IMPORTANT: If you are using the script above to add Ionicions to a non-Ionic project, make sure you are including the latest version (this example uses version 4.1.1, which is the latest at the time of writing this). In order to integrate Ionicions into a non-Ionic project you just need to include the following script: If you are using Ionic then you do not need to worry about installing Ionicons, as it is built-in by default. The performance benefit of only loading visible icons is something you get for free, but in this tutorial, I am going to walk through how we can implement our own custom icons when using Ionicons.
0 Comments
Leave a Reply. |