Merge pull request #296 from sazzadsazib/develop

Feat/add instagram icon

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .vscode
 css
 storybook-static
+.DS_Store

docs/icons.stories.js

@@ -16,6 +16,7 @@ stories.add('icon', () => {
     'nes-icon whatsapp': 'nes-icon whatsapp',
     'nes-icon gmail': 'nes-icon gmail',
     'nes-icon linkedin': 'nes-icon linkedin',
+    'nes-icon instagram': 'nes-icon instagram',
     'nes-icon close': 'nes-icon close',
     'nes-icon coin': 'nes-icon coin',
     'nes-pokeball': 'nes-pokeball',

index.html

@@ -869,6 +869,11 @@
           <i class="nes-icon linkedin"></i>
           <i class="nes-icon linkedin is-medium"></i>
           <i class="nes-icon linkedin is-large"></i>
+          
+          <i class="nes-icon instagram is-small"></i>
+          <i class="nes-icon instagram"></i>
+          <i class="nes-icon instagram is-medium"></i>
+          <i class="nes-icon instagram is-large"></i>
         </div>
         <button type="button" class="nes-btn is-error show-code" id="show-sns-code">&lt;&gt;</button>
         <span class="nes-balloon from-right copied" id="copied-sns">Copied!</span>
@@ -927,7 +932,14 @@
 &lt;i class=&quot;nes-icon linkedin is-small&quot;&gt;&lt;/i&gt;
 &lt;i class=&quot;nes-icon linkedin&quot;&gt;&lt;/i&gt;
 &lt;i class=&quot;nes-icon linkedin is-medium&quot;&gt;&lt;/i&gt;
-&lt;i class=&quot;nes-icon linkedin is-large&quot;&gt;&lt;/i&gt;</code></pre>
+&lt;i class=&quot;nes-icon linkedin is-large&quot;&gt;&lt;/i&gt;
+
+&lt;i class=&quot;nes-icon instagram is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon instagram&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon instagram is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon instagram is-large&quot;&gt;&lt;/i&gt;
+
+</code></pre>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('sns')">Copy</button>
       </section>
 

scss/icons/icons.scss

@@ -15,6 +15,7 @@
 @import "whatsapp.scss";
 @import "gmail.scss";
 @import "linkedin.scss";
+@import "instagram.scss";
 
 // others
 @import "close.scss";
@@ -148,6 +149,10 @@
     @include pixelize($default-size, $icon-linkedin, $icon-linkedin-colors);
   }
 
+  &.instagram::before {
+    @include pixelize($default-size, $icon-instagram, $icon-instagram-colors);
+  }
+
   &.coin::before {
     @include pixelize($default-size, $icon-coin, $icon-coin-colors);
   }

scss/icons/instagram.scss

@@ -0,0 +1,20 @@
+$icon-instagram-colors: (#fff, #8005c8, #d40075, #e98c25, #d84646);
+// prettier-ignore
+$icon-instagram: (
+  ( 0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0),
+  ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
+  ( 2,2,0,0,0,0,0,0,0,0,0,0,0,0,2,2),
+  ( 2,2,0,0,0,0,0,0,0,0,0,2,2,0,2,2),
+  ( 2,2,0,0,0,0,0,0,0,0,0,2,2,0,2,2),
+  ( 2,2,0,0,0,0,2,2,2,2,0,0,0,0,2,2),
+  ( 3,2,0,0,0,2,0,0,0,0,2,0,0,0,2,3),
+  ( 3,3,0,0,0,2,0,0,0,0,2,0,0,0,3,3),
+  ( 3,3,0,0,0,3,0,0,0,0,3,0,0,0,3,3),
+  ( 3,3,0,0,0,3,0,0,0,0,3,0,0,0,3,3),
+  ( 4,4,0,0,0,0,3,3,3,3,0,0,0,0,3,3),
+  ( 4,4,0,0,0,0,0,0,0,0,0,0,0,0,3,3),
+  ( 4,4,0,0,0,0,0,0,0,0,0,0,0,0,5,5),
+  ( 4,4,0,0,0,0,0,0,0,0,0,0,0,0,5,5),
+  ( 0,4,4,4,4,4,4,4,4,5,5,5,5,5,5,0),
+  ( 0,0,4,4,4,4,4,4,5,5,5,5,5,5,0,0)
+);