How to add new icons and contribute ?

[StarAzure]

Hello, I would like to design and add new icons and use it/contribute. Any documentation to do so will help.

Thanks

[webkul-nitish]

We are currently not accepting pull requests for icons.

[StarAzure]

Understood but how can we add our own icons for our own needs ? Do you have any documentation ? Requesting new icons and having you implement at your discretion and time may not work for many of us as you only have a small number of icons. If we could add our own, it will make it super useful.

[webkul-nitish]

@StarAzure We're still working on Icons. However if you wish to add your own icons, Follow the steps below -

1. Replace the Icons in icons directory

2. Make sure SVG Icons has the vi-primary and vi-accent class, so that the colors be customized from src/config.js. Sample SVG Code

   <svg id="chat" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
   <defs>
   <style>
     .vi-primary {
       fill: #ffb400;
     }
   
     .vi-primary, .vi-accent {
       fill-rule: evenodd;
     }
   
     .vi-accent {
       fill: #070c2b;
     }
   </style>
   </defs>
   <path class="vi-primary" d="M24,39.765A18.556,18.556,0,0,1,13.924,37.1L7,44V23.882l0.012,0.006C7.011,23.791,7,23.7,7,23.6,7,14.369,13.247,8,24,8s17,6.652,17,15.882S34.753,39.765,24,39.765Z"/>
   <path class="vi-accent" d="M31.994,20.99a3,3,0,1,1-3,3A3,3,0,0,1,31.994,20.99ZM24,21a3,3,0,1,1-3,3A3,3,0,0,1,24,21Zm-8,0a3,3,0,1,1-3,3A3,3,0,0,1,16,21Z"/>
   </svg>

3. Run npm run build **Documentation is coming soon. Project is still growing. Thanks!