SELF-211/Add bank icon

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.23
+
+- Adds `BankAccount` to Icons and the `Icon` component
+
 ## v2.0.22
 
 - Change the border color for `secondary-button` links

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.22",
+  "version": "2.0.23",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/Icon/types.ts

@@ -13,6 +13,7 @@ export const IconName = {
   APP_WINDOWS: 'AppWindows',
   ARROW_DOWN_TO_LINE: 'ArrowDownToLine',
   ARROW_TREND_UP: 'ArrowTrendUp',
+  BANK_ACCOUNT: 'BankAccount',
   BARS: 'Bars',
   BELL: 'Bell',
   BULLHORN: 'Bullhorn',

src/components/Icons/BankAccount.vue

@@ -0,0 +1,42 @@
+<template>
+  <svg
+    :width="currentSize"
+    :height="currentSize"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M 17.5 8.332031 C 17.609375 8.332031 17.71875 8.3125 17.820312 8.269531 C 17.921875 8.226562 18.011719 8.167969 18.089844 8.089844 C 18.167969 8.011719 18.226562 7.917969 18.269531 7.820312 C 18.3125 7.71875 18.332031 7.609375 18.332031 7.5 L 18.332031 5 C 18.332031 4.824219 18.277344 4.65625 18.175781 4.511719 C 18.074219 4.371094 17.929688 4.265625 17.761719 4.210938 L 10.261719 1.710938 C 10.09375 1.652344 9.90625 1.652344 9.738281 1.710938 L 2.234375 4.210938 C 2.070312 4.265625 1.925781 4.371094 1.824219 4.511719 C 1.722656 4.65625 1.667969 4.824219 1.667969 5 L 1.667969 7.5 C 1.667969 7.609375 1.6875 7.71875 1.730469 7.820312 C 1.773438 7.917969 1.832031 8.011719 1.910156 8.089844 C 1.988281 8.167969 2.078125 8.226562 2.179688 8.269531 C 2.28125 8.3125 2.390625 8.332031 2.5 8.332031 L 3.332031 8.332031 L 3.332031 14.320312 C 2.847656 14.492188 2.425781 14.808594 2.128906 15.230469 C 1.828125 15.648438 1.667969 16.152344 1.667969 16.667969 L 1.667969 18.332031 C 1.667969 18.441406 1.6875 18.550781 1.730469 18.652344 C 1.773438 18.753906 1.832031 18.84375 1.910156 18.921875 C 1.988281 19 2.078125 19.0625 2.179688 19.101562 C 2.28125 19.144531 2.390625 19.167969 2.5 19.167969 L 17.5 19.167969 C 17.609375 19.167969 17.71875 19.144531 17.820312 19.101562 C 17.921875 19.0625 18.011719 19 18.089844 18.921875 C 18.167969 18.84375 18.226562 18.753906 18.269531 18.652344 C 18.3125 18.550781 18.332031 18.441406 18.332031 18.332031 L 18.332031 16.667969 C 18.332031 16.152344 18.171875 15.648438 17.871094 15.230469 C 17.574219 14.808594 17.152344 14.492188 16.667969 14.320312 L 16.667969 8.332031 Z M 16.667969 17.5 L 3.332031 17.5 L 3.332031 16.667969 C 3.332031 16.445312 3.421875 16.234375 3.578125 16.078125 C 3.734375 15.921875 3.945312 15.832031 4.167969 15.832031 L 15.832031 15.832031 C 16.054688 15.832031 16.265625 15.921875 16.421875 16.078125 C 16.578125 16.234375 16.667969 16.445312 16.667969 16.667969 Z M 5 14.167969 L 5 8.332031 L 6.667969 8.332031 L 6.667969 14.167969 Z M 8.332031 14.167969 L 8.332031 8.332031 L 11.667969 8.332031 L 11.667969 14.167969 Z M 13.332031 14.167969 L 13.332031 8.332031 L 15 8.332031 L 15 14.167969 Z M 3.332031 6.667969 L 3.332031 5.601562 L 10 3.378906 L 16.667969 5.601562 L 16.667969 6.667969 Z M 3.332031 6.667969 "
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+const iconInfo = {
+  xxl: { size: 24 },
+  xl: { size: 20 },
+  l: { size: 18 },
+  m: { size: 16 },
+  s: { size: 14 }
+};
+
+export default {
+  name: 'BankAccount',
+  props: {
+    size: {
+      type: String,
+      default: 'm',
+      validator: function (value) {
+        return ['xxl', 'xl', 'l', 'm', 's'].includes(value);
+      }
+    }
+  },
+  computed: {
+    currentSize() {
+      return iconInfo[this.size].size;
+    }
+  }
+};
+</script>

src/components/Icons/index.js

@@ -7,6 +7,7 @@ export { default as ArrowLongRight } from './ArrowLongRight';
 export { default as ArrowLongUp } from './ArrowLongUp';
 export { default as ArrowsRotate } from './ArrowsRotate';
 export { default as ArrowTrendUp } from './ArrowTrendUp';
+export { default as BankAccount } from './BankAccount';
 export { default as Bars } from './Bars';
 export { default as BarsStaggered } from './BarsStaggered';
 export { default as Bell } from './Bell';