How to add custom icon vue-awesome

To show vector icon in the vue component is nice library – vue-awesome
In the brand category is a lot of images. But for example we need to add – Vivaldi browser icon but it doesn’t exist.
Read above how to add this icon

In the script component part after :

import Icon from 'vue-awesome/components/Icon';

We register new icon:

Icon.register({
      vivaldi: {
          width: 100,
          height: 100,
          paths: [
              {
                  style: 'fill:#b22222',
                  g: ''
              }
          ]
      }
  });

Next we search the vector icon. For example Papirus icon set file

But this file is with paths:

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1">
 <rect style="fill:#c2352a" width="56" height="56" x="-60" y="-60" rx="3" ry="3" transform="matrix(0,-1,-1,0,0,0)"/>
 <path style="opacity:0.1;fill:#ffffff" d="M 7 4 C 5.338 4 4 5.338 4 7 L 4 8 C 4 6.338 5.338 5 7 5 L 57 5 C 58.662 5 60 6.338 60 8 L 60 7 C 60 5.338 58.662 4 57 4 L 7 4 z"/>
 <path style="opacity:0.2" d="m 45.589214,17.000686 c -0.72186,5.5e-4 -1.45276,0.155277 -2.0378,0.456591 -0.85494,0.440311 -1.71546,1.373032 -2.0972,2.273154 -0.40568,0.956581 -0.46394,2.642947 -0.12216,3.539329 0.14456,0.379052 0.39402,1.030359 0.55426,1.447331 0.36188,0.941681 0.49214,3.012939 0.2627,4.176315 -0.25834,1.309934 -1.06094,2.823143 -2.0018,3.774324 -2.8234,2.853942 -7.092,2.903941 -9.8962,0.115858 -0.96764,-0.962121 -1.10488,-1.191836 -5.473,-9.167215 -1.482,-2.707946 -2.812,-4.9751 -3.088,-5.268094 -0.868,-0.939781 -2.075,-1.275774 -3.1802,-1.281374 -2.376,-0.03946 -4.0228,1.862682 -4.4136,3.904521 -0.28866,1.634007 -0.42144,1.352713 7.2538,15.34589 4.8446,8.832422 7.1472,12.90394 7.5248,13.304132 1.33742,1.417811 3.2428,1.769244 5.0258,0.926981 0.4688,-0.221475 0.9995,-0.619487 1.3385,-1.00386 0.66402,-0.752884 14.3956,-25.693481 14.6184,-26.551464 0.23352,-0.899202 0.17552,-2.176756 -0.13872,-3.060938 -0.3909,-1.099778 -1.46938,-2.228155 -2.533,-2.650346 -0.47742,-0.189477 -1.03342,-0.282375 -1.59486,-0.281915 z"/>
 <path style="fill:#ffffff" d="m 45.589214,16.000686 c -0.72186,5.5e-4 -1.45276,0.155277 -2.0378,0.456591 -0.85494,0.440311 -1.71546,1.373032 -2.0972,2.273154 -0.40568,0.956581 -0.46394,2.642947 -0.12216,3.539329 0.14456,0.379052 0.39402,1.030359 0.55426,1.447331 0.36188,0.941681 0.49214,3.012939 0.2627,4.176315 -0.25834,1.309934 -1.06094,2.823143 -2.0018,3.774324 -2.8234,2.853942 -7.092,2.903941 -9.8962,0.115858 -0.96764,-0.962121 -1.10488,-1.191836 -5.473,-9.167215 -1.482,-2.707946 -2.812,-4.9751 -3.088,-5.268094 -0.868,-0.939781 -2.075,-1.275774 -3.1802,-1.281374 -2.376,-0.03946 -4.0228,1.862682 -4.4136,3.904521 -0.28866,1.634007 -0.42144,1.352713 7.2538,15.34589 4.8446,8.832422 7.1472,12.90394 7.5248,13.304132 1.33742,1.417811 3.2428,1.769244 5.0258,0.926981 0.4688,-0.221475 0.9995,-0.619487 1.3385,-1.00386 0.66402,-0.752884 14.3956,-25.693481 14.6184,-26.551464 0.23352,-0.899202 0.17552,-2.176756 -0.13872,-3.060938 -0.3909,-1.099778 -1.46938,-2.228155 -2.533,-2.650346 -0.47742,-0.189477 -1.03342,-0.282375 -1.59486,-0.281915 z"/>
 <path style="opacity:0.2" d="m 4,57 0,1 c 0,1.662 1.338,3 3,3 l 50,0 c 1.662,0 3,-1.338 3,-3 l 0,-1 c 0,1.662 -1.338,3 -3,3 L 7,60 C 5.338,60 4,58.662 4,57 Z"/>
</svg>

To optimize svg use SVGO package:

Install it globally and run :

svgo Papirus-Team-Papirus-Apps-Vivaldi.svg -o Papirus-Team-Papirus-Apps-Vivaldi-optimised.svg

Output show success:

Papirus-Team-Papirus-Apps-Vivaldi.svg:
Done in 51 ms!
2.573 KiB - 35.9% = 1.648 KiB

Icon.register({
    vivaldi: {
        width: 64,
        height: 64,
        paths: [
            {
                style: 'fill:#fff;opacity:0.1',
                d: 'M7 4C5.338 4 4 5.338 4 7v1c0-1.662 1.338-3 3-3h50c1.662 0 3 1.338 3 3V7c0-1.662-1.338-3-3-3H7z'
            },
            {
                style: 'opacity:0.2',
                d: 'M45.59 17c-.723.001-1.454.156-2.039.457-.855.44-1.715 1.373-2.097 2.273-.405.957-.464 2.643-.122 3.54l.554 1.447c.362.942.492 3.013.263 4.176-.258 1.31-1.06 2.824-2.002 3.775-2.823 2.854-7.092 2.904-9.896.116-.968-.963-1.105-1.192-5.473-9.168-1.482-2.708-2.812-4.975-3.088-5.268-.868-.94-2.075-1.275-3.18-1.281-2.376-.04-4.023 1.863-4.414 3.904-.288 1.634-.421 1.353 7.254 15.346 4.845 8.833 7.147 12.904 7.525 13.304 1.337 1.418 3.243 1.77 5.026.927.468-.221 1-.62 1.338-1.003.664-.753 14.396-25.694 14.619-26.552.233-.9.175-2.177-.14-3.06-.39-1.1-1.469-2.229-2.532-2.651A4.371 4.371 0 0045.59 17z'
            },
            {
                style: 'fill:#fff',
                d: 'M45.59 16c-.723.001-1.454.156-2.039.457-.855.44-1.715 1.373-2.097 2.273-.405.957-.464 2.643-.122 3.54l.554 1.447c.362.942.492 3.013.263 4.176-.258 1.31-1.06 2.824-2.002 3.775-2.823 2.854-7.092 2.904-9.896.116-.968-.963-1.105-1.192-5.473-9.168-1.482-2.708-2.812-4.975-3.088-5.268-.868-.94-2.075-1.275-3.18-1.281-2.376-.04-4.023 1.863-4.414 3.904-.288 1.634-.421 1.353 7.254 15.346 4.845 8.833 7.147 12.904 7.525 13.304 1.337 1.418 3.243 1.77 5.026.927.468-.221 1-.62 1.338-1.003.664-.753 14.396-25.694 14.619-26.552.233-.9.175-2.177-.14-3.06-.39-1.1-1.469-2.229-2.532-2.651A4.371 4.371 0 0045.59 16z'
            },
            {
                style: 'opacity:0.2',
                d: 'M4 57v1c0 1.662 1.338 3 3 3h50c1.662 0 3-1.338 3-3v-1c0 1.662-1.338 3-3 3H7c-1.662 0-3-1.338-3-3z'
            },
        ]
    }
});

And in the html component add this icon registered icon:

<v-icon :name="'vivaldi'" scale="3" :label="'Vivaldi'" style="background-color: #c2352a"/>

And result is: