From 8ec9c8f2034efc10d51c5e6c336d1952f26423a2 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <info@fabiomanganiello.com>
Date: Sun, 10 Apr 2022 13:07:01 +0200
Subject: [PATCH] Added standard component for icons

---
 .../webapp/src/components/elements/Icon.vue   | 43 +++++++++++++++++++
 .../backend/http/webapp/src/style/icons.scss  |  2 +
 2 files changed, 45 insertions(+)
 create mode 100644 platypush/backend/http/webapp/src/components/elements/Icon.vue

diff --git a/platypush/backend/http/webapp/src/components/elements/Icon.vue b/platypush/backend/http/webapp/src/components/elements/Icon.vue
new file mode 100644
index 000000000..eb44fd603
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/Icon.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="icon-container">
+    <img class="icon" :src="url" :alt="alt" v-if="url?.length">
+    <i class="icon" :class="className" v-else-if="className?.length" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    class: {
+      type: String,
+    },
+    url: {
+      type: String,
+    },
+    alt: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    className() {
+      return this.class
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-container {
+  display: inline-flex;
+  width: $icon-container-size;
+  justify-content: center;
+  text-align: center;
+
+  .icon {
+    width: 1em;
+    height: 1em;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/style/icons.scss b/platypush/backend/http/webapp/src/style/icons.scss
index fb599674e..a2cb7ef1a 100644
--- a/platypush/backend/http/webapp/src/style/icons.scss
+++ b/platypush/backend/http/webapp/src/style/icons.scss
@@ -1,3 +1,5 @@
+$icon-container-size: 3em;
+
 @mixin icon {
   content: ' ';
   background-size: 1em 1em;