feat(icons): added missing icons (#172)

* feat(icons): added missing icons

Added several icons that were missing from the UI Kit

HEYUI-276

* added body color icons and made a few positioning changes

packages/icons/src/docs/Component.stories.mdx

@@ -34,6 +34,7 @@ export const IconTemplate = args => {
   const iconsList = Object.keys(Icons)
     .map(key => Icons[key])
     .filter(icon => 'displayName' in icon);
+  console.log(Object.keys(Icons));
   const maxCols = 10;
   const amountRows = new Array(Math.ceil(iconsList.length / maxCols)).fill(0);
   return amountRows.map((_, index) => (

packages/icons/src/index.ts

@@ -1,36 +1,60 @@
 export * from './paths/ABSport';
 export * from './paths/AC';
+export * from './paths/Amex';
 export * from './paths/AndroidAuto';
 export * from './paths/ApplePlay';
 export * from './paths/Automatic';
+export * from './paths/Bluetooth';
+
+export * from './paths/BodyColorBlack';
+export * from './paths/BodyColorBlue';
+export * from './paths/BodyColorBrown';
+export * from './paths/BodyColorGold';
+export * from './paths/BodyColorGreen';
+export * from './paths/BodyColorGrey';
+export * from './paths/BodyColorOrange';
+export * from './paths/BodyColorRed';
+export * from './paths/BodyColorSilver';
+export * from './paths/BodyColorWhite';
+export * from './paths/BodyColorYellow';
+
+export * from './paths/Bonus';
 export * from './paths/BuyingСar';
 export * from './paths/Calculator';
 export * from './paths/Calendar';
 export * from './paths/Call';
 export * from './paths/CallBack';
+export * from './paths/Canada';
 export * from './paths/Car';
 export * from './paths/CarLocation';
 export * from './paths/Card';
 export * from './paths/Clock';
 export * from './paths/Close';
+export * from './paths/CO2';
 export * from './paths/Copy';
 export * from './paths/Collect';
 export * from './paths/Convertible';
 export * from './paths/CruiseControl';
 export * from './paths/Coupe';
+export * from './paths/CustomerService';
+export * from './paths/Datasheet';
 export * from './paths/Dealer';
 export * from './paths/ElectricWindow';
 export * from './paths/Email';
 export * from './paths/Engine';
+export * from './paths/Error';
 export * from './paths/Estate';
+export * from './paths/Euro';
 export * from './paths/Exterior';
 export * from './paths/EV';
 export * from './paths/Eye';
 export * from './paths/Filter';
 export * from './paths/Finance';
 export * from './paths/FiveDoors';
+export * from './paths/France';
 export * from './paths/Fuel';
 export * from './paths/Gallery';
+export * from './paths/Germany';
 export * from './paths/Hamburger';
 export * from './paths/Hatchback';
 export * from './paths/HeatedMirror';
@@ -42,9 +66,11 @@ export * from './paths/Horsepower';
 export * from './paths/Hybrid';
 export * from './paths/Image';
 export * from './paths/Info';
+export * from './paths/Intercom';
 export * from './paths/Interior';
 export * from './paths/ISOFix';
 export * from './paths/Key';
+export * from './paths/Language';
 export * from './paths/LargeBoot';
 export * from './paths/Leather';
 export * from './paths/List';
@@ -53,18 +79,22 @@ export * from './paths/Lorry';
 export * from './paths/LowEmission';
 export * from './paths/LumbarSupport';
 export * from './paths/Manual';
+export * from './paths/Mastercard';
 export * from './paths/MBG';
 export * from './paths/Mileage';
 export * from './paths/Minus';
 export * from './paths/MinusCircle';
+export * from './paths/MOT';
 export * from './paths/MVP';
+export * from './paths/Netherlands';
 export * from './paths/NewCar';
 export * from './paths/Others';
 export * from './paths/ParkingCamera';
 export * from './paths/Play';
 export * from './paths/Plus';
 export * from './paths/PlusCircle';
 export * from './paths/Pickup';
+export * from './paths/Pound';
 export * from './paths/Read';
 export * from './paths/RegNr';
 export * from './paths/RegularBoot';
@@ -79,6 +109,7 @@ export * from './paths/ShoppingBag';
 export * from './paths/Sort';
 export * from './paths/Sound';
 export * from './paths/SoundSystem';
+export * from './paths/Spain';
 export * from './paths/Sunroof';
 export * from './paths/SUV';
 export * from './paths/Swap';
@@ -87,9 +118,11 @@ export * from './paths/ThreeSixty';
 export * from './paths/Tick';
 export * from './paths/TickCircle';
 export * from './paths/Trend';
+export * from './paths/UK';
 export * from './paths/USB';
 export * from './paths/Video';
 export * from './paths/VideoReq';
+export * from './paths/Visa';
 export * from './paths/Van';
 export * from './paths/Warning';
 export * from './paths/Warranty';

packages/icons/src/paths/Amex.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const Amex = createSvgIcon(
+  <>
+    <path
+      d="M0,0h24v24H0z"
+      fill="transparent"
+      stroke="#EAEAEA"
+      strokeWidth=".5"
+    />
+    <path
+      clipRule="evenodd"
+      d="M4.257 9.692 2 14.302h2.702l.335-.735h.766l.335.735h2.974v-.561l.265.56h1.539l.265-.572v.573h6.185l.753-.716.704.716 3.177.006-2.264-2.298L22 9.692h-3.128l-.732.703-.682-.703h-6.73l-.577 1.19-.592-1.19H6.863v.542l-.3-.542H4.257Zm.523.655h1.317l1.497 3.126v-3.126h1.443l1.156 2.242 1.066-2.242h1.436v3.308h-.874l-.007-2.592-1.273 2.592h-.782l-1.28-2.592v2.592H6.68l-.34-.742H4.5l-.34.741h-.963l1.583-3.307Zm12.266 0h-3.552v3.306h3.497l1.128-1.096 1.086 1.096h1.136L18.69 12.01l1.65-1.663h-1.086l-1.121 1.083-1.087-1.083Zm-11.625.56-.607 1.32h1.213l-.606-1.32Zm8.95.73v-.604h2.217l.967.965-1.01.971h-2.174v-.66h1.938v-.672h-1.938Z"
+      fill="#044BBC"
+      fillRule="evenodd"
+    />
+  </>,
+  'Amex',
+);

packages/icons/src/paths/Bluetooth.tsx

@@ -4,8 +4,10 @@ import createSvgIcon from '../utils/createSvgIcon';
 
 export const Bluetooth = createSvgIcon(
   <path
-    d="M10.5592 2.06628L18.16 8.14691L12.8934 12.3602L18.2267 16.0935L10.5592 22.2275L10.5592 14.2275L7.1839 16.9278L5.93451 15.366L9.55835 12.467L5.98574 9.96614L7.13267 8.32768L10.5592 10.7263L10.5592 2.06628ZM12.5592 14.5676L14.8917 16.2003L12.5592 18.0663L12.5592 14.5676ZM12.5592 10.0663V6.22753L14.9584 8.14691L12.5592 10.0663Z"
-    fillRule="evenodd"
+    d="m6 16 10-8-5-4v16l5-4L6 9"
+    fill="transparent"
+    stroke="currentColor"
+    strokeWidth="2"
   />,
   'Bluetooth',
 );

packages/icons/src/paths/BodyColorBlack.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorBlack = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#1D1D1D"
+    r="10"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorBlack',
+);

packages/icons/src/paths/BodyColorBlue.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorBlue = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#164CA3"
+    r="10"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorBlue',
+);

packages/icons/src/paths/BodyColorBrown.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorBrown = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#7B431B"
+    r="10"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorBrown',
+);

packages/icons/src/paths/BodyColorGold.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorGold = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#C7A325"
+    r="10"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorGold',
+);

packages/icons/src/paths/BodyColorGreen.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorGreen = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#1F8B4D"
+    r="10"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorGreen',
+);

packages/icons/src/paths/BodyColorGrey.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorGrey = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#838383"
+    r="10"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorGrey',
+);

packages/icons/src/paths/BodyColorOrange.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorOrange = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#FC7E09"
+    r="10"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorOrange',
+);

packages/icons/src/paths/BodyColorRed.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorRed = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#E24529"
+    r="10"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorRed',
+);

packages/icons/src/paths/BodyColorSilver.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorSilver = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#B5B5B5"
+    r="10"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorSilver',
+);

packages/icons/src/paths/BodyColorWhite.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorWhite = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#fff"
+    r="9.5"
+    stroke="#838383"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorWhite',
+);

packages/icons/src/paths/BodyColorYellow.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const BodyColorYellow = createSvgIcon(
+  <circle
+    cx="10"
+    cy="10"
+    fill="#FAC361"
+    r="10"
+    transform="matrix(1 0 0 -1 2 22)"
+  />,
+  'BodyColorYellow',
+);

packages/icons/src/paths/Bonus.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const Bonus = createSvgIcon(
+  <>
+    <path
+      d="M8.016 7.743c-1.48-.025-2.39-1.63-1.65-2.913.74-1.282 2.586-1.298 3.347-.028L11.511 7.8l-3.495-.057ZM15.984 7.743c1.48-.025 2.39-1.63 1.65-2.913-.74-1.282-2.586-1.298-3.347-.028L12.489 7.8l3.495-.057ZM5 12h14v8H5zM4 8h16v4H4z"
+      fill="transparent"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path d="M11 9h2v10h-2z" />
+  </>,
+  'Bonus',
+);

packages/icons/src/paths/CO2.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable unicorn/filename-case */
+/* eslint-disable @typescript-eslint/naming-convention */
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const CO2 = createSvgIcon(
+  <path
+    clipRule="evenodd"
+    d="M18.317 13.975 18.16 14h-2.325c-.348-1.366.014-2.263.135-2.445l.555-.832-1.664-1.11-.555.832c-.42.631-.809 1.917-.516 3.555h-1.015c-.347-1.366.014-2.263.136-2.445l.555-.832-1.664-1.11-.555.832c-.42.631-.81 1.917-.516 3.555H9.716c-.347-1.366.014-2.263.136-2.445l.555-.832-1.665-1.11-.554.832c-.42.631-.81 1.917-.516 3.555H5.84l-.157-.025a2.001 2.001 0 0 1-.145-3.922l1.277-.3.233-1.292A3.001 3.001 0 0 1 12.039 6.8l.96.89 1.201-.524a2.002 2.002 0 0 1 2.75 1.383l.28 1.221 1.221.28a2.002 2.002 0 0 1-.134 3.925ZM14.37 16h-1.034c.213 1.953-.93 3.398-1.678 3.958l-.8.6-1.2-1.6.8-.6c.398-.298 1.077-1.162.853-2.358H10.28c.209 1.928-.958 3.259-1.68 3.8l-.8.6-1.2-1.6.8-.6c.422-.317 1.07-1.06.854-2.2H5.398a3.517 3.517 0 0 1-.026-.049 4.001 4.001 0 0 1-.292-7.845 5.002 5.002 0 0 1 8.32-2.773 4.002 4.002 0 0 1 5.5 2.768 4.001 4.001 0 0 1-.272 7.85 3.315 3.315 0 0 1-.026.049h-2.206c.213 1.953-.93 3.398-1.678 3.958l-.8.6-1.2-1.6.8-.6c.398-.298 1.077-1.162.853-2.358Z"
+    fillRule="evenodd"
+  />,
+  'CO2',
+);

packages/icons/src/paths/Canada.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import createSvgIcon from '../utils/createSvgIcon';
+
+export const Canada = createSvgIcon(
+  <>
+    <g clip-path="url(#a)">
+      <path
+        d="M18.095 0H1.905C.853 0 0 .955 0 2.133v11.734C0 15.045.853 16 1.905 16h16.19C19.147 16 20 15.045 20 13.867V2.133C20 .955 19.147 0 18.095 0Z"
+        fill="#fff"
+      />
+      <path
+        clipRule="evenodd"
+        d="M0 0h4.762v16H0V0Zm15.238 0H20v16h-4.762V0ZM10 4.267 9.048 6.4 7.619 5.333v2.134l-.952 1.066L8.57 9.6h.953v2.133h.952V9.6h.953l1.904-1.067-.952-1.066V5.333L10.857 6.4 10 4.267Z"
+        fill="red"
+        fillRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path d="M0 0h20v16H0z" fill="#fff" />
+      </clipPath>
+    </defs>
+  </>,
+  'Canada',
+  '-2 -4 24 24',
+);

packages/icons/src/paths/CarLocation.tsx

@@ -9,4 +9,5 @@ export const CarLocation = createSvgIcon(
     fillRule="evenodd"
   />,
   'CarLocation',
+  '-2.5 -4 24 24',
 );