{"id":1395,"date":"2021-11-17T18:05:28","date_gmt":"2021-11-17T17:05:28","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1395"},"modified":"2021-11-17T23:03:44","modified_gmt":"2021-11-17T22:03:44","slug":"using-an-svg-sprite-icon-system-in-angular","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/11\/17\/using-an-svg-sprite-icon-system-in-angular\/","title":{"rendered":"Using an SVG sprite icon system in Angular"},"content":{"rendered":"\n

I used to work with icon-fonts<\/span><\/em>, much time. Lots of projects ( Site or applications) really need a system for icons, and icon-fonts<\/span><\/em> offer a very fine system. But there is an another alternative to reference an icon : using inline SVG and the <use><\/code> element .<\/em><\/strong><\/span><\/p>\n\n\n\n

Whether it\u2019s icon-fonts<\/strong><\/span><\/em> or SVG<\/em><\/strong><\/span> sprites <\/strong><\/em><\/span>you use as icon sets in your application is your decision. However, we\u2019ll cover some advantages that SVG sprites have, but most importantly how you can implement them in Angular.<\/p>\n\n\n\n

Why an SVG sprite icon system?<\/h4>\n\n\n\n
  1. SVGs don\u2019t experience the problem of anti-aliasing like fonts do, so your icon will always be crisp<\/em><\/li>
  2. You can manipulate different elements within an SVG<\/em><\/li>
  3. Multi-colour support<\/em><\/li>
  4. More & easier control over the positioning of an icon (fonts are under the influence of vertical-align<\/code>, line-height<\/code>, letter-spacing<\/code>, word-spacing<\/code>, \u2026)<\/em><\/li><\/ol>\n\n\n\n
    <\/div>\n\n\n\n

    Setup<\/h4>\n\n\n\n

    1. Icon set<\/span><\/h4>\n\n\n\n

    First, we need an icon set. (Combining the .svg files).<\/p>\n\n\n\n

    \u00a0Let\u00b4s do it manualy. First we create a file named \u00a0icons-defs.svg<\/code>\u00a0(we can give any name to the svg file). <\/p>\n\n\n\n

    The content of the file should just be an\u00a0<svg><\/code>\u00a0tag, with a\u00a0<defs><\/code>\u00a0tag (which just means you are defining stuff to use later), and then a bunch of\u00a0 <symbol><\/strong> tags. Each\u00a0<symbol><\/strong>\u00a0tag will have a unique ID, and will wrap all the paths for each icon.<\/p>\n\n\n\n

    <svg>\n  <defs>\n\n    <symbol id=\"shape-icon-1\">\n      <!-- all the paths and shapes and whatnot for this icon -->\n    <symbol>\n\n    <symbol id=\"shape-icon-2\">\n      <!-- all the paths and shapes and whatnot for this icon -->\n    <symbol>\n\n    <!-- etc -->\n\n  <\/defs>\n<\/svg><\/code><\/pre>\n\n\n\n
    As we see, we can do that by hand, but of course that\u2019s a bit laborious. And there are  lot of tools who can assist us to generate our icon-set<\/em> more quickly. <\/p>\n\n\n\n
    Another way: IcoMoon<\/h4>\n\n\n\n
    We will use icomoon<\/a> to create an icon-set<\/em>. Go to icomoon\u2019s<\/a> website and click on the purple button \u201cIcoMoon App\u201d.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Next, click on \u201cGenerate SVG & More\u201d.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Now we can download the generated SVG icon set<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    When the download is successful,  let\u00b4s unzip the file. There is a file called symbol-defs.svg<\/code><\/span><\/strong><\/em>. This is the SVG sprite <\/strong><\/em>we\u2019re going to use. So copy & paste this file inside src\/assets<\/strong><\/em><\/code> folder of the Angular app.<\/p>\n\n\n\n
    We now have everything set up to use the icon set, and we can  use it like this: <\/p>\n\n\n\n
    <svg> <use attr.xlink:href=\"assets\/symbol-defs.svg#icon-images\"><\/use> <\/svg><\/code><\/pre>\n\n\n\n
    if we  start the app right now, we should see the following.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Explanation: <\/h5>\n\n\n\n
    We created all necessary html tags to display an SVG image inline, but with a twist. We defined that our source is assets\/symbol-defs.svg<\/strong><\/em><\/code>, which is our sprite file. We didn\u2019t want to show every single icon in our sprite so we defined which icon we wanted to show. We managed this by suffixing our source with #icon-images<\/code><\/strong><\/em>. Whenever we want to change our icon we just change the suffix to the name of the icon that is defined in our SVG sprite file.<\/p>\n\n\n\n
    <\/div>\n\n\n\n
    2.  Implementation time <\/span><\/h4>\n\n\n\n
    Let us create a new component file called: svg-icon.component.ts<\/strong><\/span><\/em><\/code>, and add the following content.<\/p>\n\n\n\n
    import { Component, Input, OnInit } from '@angular\/core';\n\n@Component({\n  selector: 'bvg-icon',\n  template: '<svg> <use attr.xlink:href=\"assets\/symbol-defs.svg#{{icon}}\"><\/use> <\/svg>',\n  styleUrls: ['.\/icon.component.scss']\n})\nexport class IconComponent {\n\n  @Input() icon: string;\n\n}\n<\/code><\/pre>\n\n\n\n
     we use an @Input<\/strong><\/em> for the icon name. By doing this everybody who consumes this component can define which icon they need.<\/p>\n\n\n\n
    Next, register our new component to the app.module.ts<\/code><\/span><\/strong><\/em> file.<\/p>\n\n\n\n
    import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\n\nimport { AppComponent } from '.\/app.component';\nimport { IconComponent } from '.\/bvg\/components\/icon\/icon.component';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    IconComponent\n  ],\n  imports: [\n    BrowserModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    Finally,we can use our icons that way: (ps: Be aware of the component selector above)<\/em><\/p>\n\n\n\n
     <bvg-icon  icon=\"icon-notification_summary\"><\/bvg-icon><\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    If we want to change the dimensions of our icons we have to apply these on the svg<\/code> tag<\/strong><\/em>. This means that our styling would look like this.<\/p>\n\n\n\n
    bvg-icon { \/\/ component tag\n  svg {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n  }\n}<\/code><\/pre>\n\n\n\n
     PS<\/strong>: This isn\u2019t an ideal situation. You should be able to consume the svg-icon<\/code> as if it\u2019s the icon on it\u2019s own. We want to apply styling on the component tag and be done with it. Other components who consume this component should\u2019t need to know the internal implementation. We can solve it like thi<\/em>s:<\/p>\n\n\n\n
    in the  icon.component.scss <\/strong><\/em>file:<\/p>\n\n\n\n
    :host {\n  display: inline-block;\n  \n  svg {\n    display: inline-block;\n    all: inherit;\n  }\n}<\/code><\/pre>\n\n\n\n
    What we are doing here is saying, every single style that is applied to our component itself  , should apply as well on the svg<\/code> tag.<\/p>\n\n\n\n
    Its mean, if we now give the bvg-icon<\/code> <\/strong><\/span>tag a width<\/code>,<\/strong> height<\/strong><\/code> and fill<\/code> color<\/strong>, our SVG will inherits all the styling.<\/p>\n\n\n\n
     <bvg-icon icon=\"icon-radio_speaker_volume_control\"  \n       style=\"width: 32px; height: 32px; fill:#c00\">\n <\/bvg-icon><\/code><\/pre>\n\n\n\n
    Be aware that the <\/em><\/strong>all<\/em><\/span><\/strong><\/code> <\/span>property <\/em><\/strong>isn\u2019t supported in IE and Edge<\/em><\/strong><\/a>. If you need support for them you must inherit every single property separately. Next to this you\u2019ll also need a polyfill (<\/em><\/strong>svg4everybody<\/em><\/strong><\/a>) for the SVG support.<\/em><\/strong><\/p>\n\n\n\n
    <\/p>\n\n\n\n
    Reference:<\/h5>\n\n\n\n
    https:\/\/medium.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    I used to work with icon-fonts, much time. Lots of projects ( Site or applications) really need a system for icons, and icon-fonts offer a very fine system. But there is an another alternative to reference an icon : using inline SVG and the <use> element . Whether it\u2019s icon-fonts or SVG sprites you use as icon […]<\/p>\n","protected":false},"author":1,"featured_media":1402,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,37],"tags":[130,392,287],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1395"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1395"}],"version-history":[{"count":10,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1395\/revisions"}],"predecessor-version":[{"id":1418,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1395\/revisions\/1418"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1402"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}