[feat] add webpack-icon

qkrdmstlr3 · qkrdmstlr3 · commit abb013e7d3d1 · 2021-11-26T13:57:53.000+09:00
- add webpack icon
diff --git a/src/components/ui/SettingInterval/index.tsx b/src/components/ui/SettingInterval/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import * as Style from './style';
 import Question from '../Icon/Question';
-import { Header, ToolTip } from './style';
 
 interface SettingIntervalProps {
   interval: string;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -22,13 +22,13 @@ const techsSrc: string[] = [
   'swift-icon.svg',
   'react-icon.svg',
   'gatsby-icon.svg',
+  'webpack-icon.svg',
   'github-icon.svg',
   'docker-icon.svg',
   'kubernetes-icon.svg',
   'raspberrypi-icon.svg',
   'map-icon.svg',
   '',
-  '',
 ];
 
 const initTechs = (): TechType[] => {
diff --git a/static/webpack-icon.svg b/static/webpack-icon.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 774 875.7">
+  <defs>
+    <style>
+    @keyframes webpack-inner-ani {
+        33% {
+          transform: scale(0.5);
+        }
+        66% {
+          transform: rotate(180deg) scale(0.5);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      @keyframes webpack-outer-ani {
+        33% {
+          transform: scale(1.05);
+        }
+        66% {
+          transform: rotate(-180deg) scale(1.05);
+        }
+        100% {
+          transform: rotate(-360deg);
+        }
+      }
+      #webpack-inner-box {
+        animation: webpack-inner-ani 5s infinite;
+        transform-origin: 50% 50%;
+      }
+      #webpack-outer-box {
+        animation: webpack-outer-ani 5s infinite;
+        transform-origin: 50% 50%;
+      }
+    </style>
+  </defs>
+  <path id="webpack-outer-box" fill="#8ed6fb" d="M704.9 641.7L399.8 814.3V679.9l190.1-104.6 115 66.4zm20.9-18.9V261.9l-111.6 64.5v232l111.6 64.4zM67.9 641.7L373 814.3V679.9L182.8 575.3 67.9 641.7zM47 622.8V261.9l111.6 64.5v232L47 622.8zm13.1-384.3L373 61.5v129.9L172.5 301.7l-1.6.9-110.8-64.1zm652.6 0l-312.9-177v129.9l200.5 110.2 1.6.9 110.8-64z"/>
+  <path id="webpack-inner-box" fill="#1c78c0" d="M373 649.3L185.4 546.1V341.8L373 450.1v199.2zm26.8 0l187.6-103.1V341.8L399.8 450.1v199.2zm-13.4-207zM198.1 318.2l188.3-103.5 188.3 103.5-188.3 108.7-188.3-108.7z"/>
+</svg>
diff --git a/techs/webpack-icon.svg b/techs/webpack-icon.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 774 875.7">
+  <defs>
+    <style>
+    @keyframes webpack-inner-ani {
+        33% {
+          transform: scale(0.5);
+        }
+        66% {
+          transform: rotate(180deg) scale(0.5);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      @keyframes webpack-outer-ani {
+        33% {
+          transform: scale(1.05);
+        }
+        66% {
+          transform: rotate(-180deg) scale(1.05);
+        }
+        100% {
+          transform: rotate(-360deg);
+        }
+      }
+      #webpack-inner-box {
+        animation: webpack-inner-ani 5s infinite;
+        transform-origin: 50% 50%;
+      }
+      #webpack-outer-box {
+        animation: webpack-outer-ani 5s infinite;
+        transform-origin: 50% 50%;
+      }
+    </style>
+  </defs>
+  <path id="webpack-outer-box" fill="#8ed6fb" d="M704.9 641.7L399.8 814.3V679.9l190.1-104.6 115 66.4zm20.9-18.9V261.9l-111.6 64.5v232l111.6 64.4zM67.9 641.7L373 814.3V679.9L182.8 575.3 67.9 641.7zM47 622.8V261.9l111.6 64.5v232L47 622.8zm13.1-384.3L373 61.5v129.9L172.5 301.7l-1.6.9-110.8-64.1zm652.6 0l-312.9-177v129.9l200.5 110.2 1.6.9 110.8-64z"/>
+  <path id="webpack-inner-box" fill="#1c78c0" d="M373 649.3L185.4 546.1V341.8L373 450.1v199.2zm26.8 0l187.6-103.1V341.8L399.8 450.1v199.2zm-13.4-207zM198.1 318.2l188.3-103.5 188.3 103.5-188.3 108.7-188.3-108.7z"/>
+</svg>
