add empty circle icon

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.1
+
+- Adds a `CircleEmpty` icon.
+
 ## v2.0.0
 
 - Removing beta tag since this is no longer in beta

package.json

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

src/components/Icons/CircleEmpty.vue

@@ -0,0 +1,55 @@
+<template>
+  <svg
+    :width="currentSize"
+    :height="currentSize"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M 10 0 C 8.023438 0 6.089844 0.585938 4.445312 1.683594 C 2.800781 2.785156 1.519531 4.347656 0.761719 6.171875 C 0.00390625 8 -0.195312 10.011719 0.191406 11.949219 C 0.578125 13.890625 1.53125 15.671875 2.929688 17.070312 C 4.328125 18.46875 6.109375 19.421875 8.050781 19.808594 C 9.988281 20.195312 12 19.996094 13.828125 19.238281 C 15.652344 18.480469 17.214844 17.199219 18.316406 15.554688 C 19.414062 13.910156 20 11.976562 20 10 C 20 8.6875 19.742188 7.386719 19.238281 6.171875 C 18.734375 4.960938 18 3.859375 17.070312 2.929688 C 16.140625 2 15.039062 1.265625 13.828125 0.761719 C 12.613281 0.257812 11.3125 0 10 0 Z M 10 18 C 8.417969 18 6.871094 17.53125 5.554688 16.652344 C 4.238281 15.773438 3.214844 14.523438 2.609375 13.0625 C 2.003906 11.601562 1.84375 9.992188 2.152344 8.4375 C 2.460938 6.886719 3.222656 5.460938 4.34375 4.34375 C 5.460938 3.222656 6.886719 2.460938 8.4375 2.152344 C 9.992188 1.84375 11.601562 2.003906 13.0625 2.609375 C 14.523438 3.214844 15.773438 4.238281 16.652344 5.554688 C 17.53125 6.871094 18 8.417969 18 10 C 18 12.121094 17.15625 14.15625 15.65625 15.65625 C 14.15625 17.15625 12.121094 18 10 18 Z M 10 18 "
+      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: 'CircleEmpty',
+  props: {
+    size: {
+      type: String,
+      default: 'm',
+      validator: function (value) {
+        return ['xxl', 'xl', 'l', 'm', 's'].includes(value);
+      }
+    }
+  },
+  computed: {
+    currentSize() {
+      return iconInfo[this.size].size;
+    },
+    path() {
+      return iconInfo[this.size].path;
+    }
+  }
+};
+</script>

src/components/Icons/index.js

@@ -1,3 +1,5 @@
+import { fr } from 'date-fns/locale';
+
 export { default as AddressBook } from './AddressBook';
 export { default as AppWindows } from './AppWindows';
 export { default as ArrowDownToLine } from './ArrowDownToLine';
@@ -23,6 +25,7 @@ export { default as ChartLineUp } from './ChartLineUp';
 export { default as ChartMixed } from './ChartMixed';
 export { default as Check } from './Check';
 export { default as CircleCheck } from './CircleCheck';
+export { default as CircleEmpty } from './CircleEmpty';
 export { default as ChevronDown } from './ChevronDown';
 export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';