feat: svg icons

2021-08-28 05:47:33 +05:30
parent e397e3fb6f
commit 476bfbaef0
149 changed files with 476 additions and 392 deletions
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -5,7 +5,7 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
-          icon="menu_open"
+          svg="sidebar"
          :class="{ 'transform -rotate-180': !LEFT_SIDEBAR }"
          @click.native="LEFT_SIDEBAR = !LEFT_SIDEBAR"
        />
@@ -14,7 +14,7 @@
          :title="`${
            ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
          } ${$t('layout.zen_mode')}`"
-          :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
+          :svg="ZEN_MODE ? 'minimize' : 'maximize'"
          :class="{
            '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
              ZEN_MODE,
@@ -33,19 +33,21 @@
          >
            <template #trigger>
              <ButtonSecondary
-                icon="help_center"
-                class="rounded-none"
+                svg="life-buoy"
+                class="!rounded-none"
                :label="$t('app.help')"
              />
            </template>
            <div class="flex flex-col">
              <SmartItem
+                svg="book"
                :label="$t('app.documentation')"
                to="https://docs.hoppscotch.io"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
              <SmartItem
+                svg="zap"
                :label="$t('app.keyboard_shortcuts')"
                @click.native="
                  showShortcuts = true
@@ -53,12 +55,14 @@
                "
              />
              <SmartItem
+                svg="gift"
                :label="$t('app.whats_new')"
                to="https://docs.hoppscotch.io/changelog"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
              <SmartItem
+                svg="message-circle"
                :label="$t('app.chat_with_us')"
                @click.native="
                  chatWithUs()
@@ -67,12 +71,14 @@
              />
              <hr />
              <SmartItem
+                svg="twitter"
                :label="$t('app.twitter')"
                to="https://twitter.com/hoppscotch_io"
                blank
                @click.native="$refs.options.tippy().hide()"
              />
              <SmartItem
+                svg="lock"
                :label="$t('app.terms_and_privacy')"
                to="https://docs.hoppscotch.io/privacy"
                blank
@@ -87,21 +93,21 @@
        </span>
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          icon="keyboard"
+          svg="zap"
          :title="$t('app.shortcuts')"
          @click.native="showShortcuts = true"
        />
        <ButtonSecondary
          v-if="navigatorShare"
          v-tippy="{ theme: 'tooltip' }"
-          icon="share"
+          svg="share-2"
          :title="$t('request.share')"
          @click.native="nativeShare()"
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
-          icon="menu_open"
+          svg="sidebar"
          class="transform rotate-180"
          :class="{ 'rotate-360': !RIGHT_SIDEBAR }"
          @click.native="RIGHT_SIDEBAR = !RIGHT_SIDEBAR"
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -16,13 +16,13 @@
          id="installPWA"
          v-tippy="{ theme: 'tooltip' }"
          :title="$t('header.install_pwa')"
-          icon="download_for_offline"
+          svg="download"
          class="rounded"
          @click.native="showInstallPrompt()"
        />
        <ButtonSecondary
          v-if="currentUser === null"
-          icon="filter_drama"
+          svg="upload-cloud"
          :label="$t('header.save_workspace')"
          filled
          class="hidden !font-semibold md:flex"
@@ -52,12 +52,12 @@
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('header.account')"
                class="rounded"
-                icon="account_circle"
+                svg="user"
              />
            </template>
            <SmartItem
              to="/settings"
-              icon="settings"
+              svg="settings"
              :label="$t('navigation.settings')"
              @click.native="$refs.user.tippy().hide()"
            />
--- a/components/app/Share.vue
+++ b/components/app/Share.vue
@@ -23,7 +23,7 @@
            </span>
          </a>
          <button class="share-link" @click="copyAppLink">
-            <span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span>
+            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
            <span class="mt-3">
              {{ $t("app.copy") }}
            </span>
@@ -54,11 +54,11 @@ export default defineComponent({

    return {
      url: "https://hoppscotch.io",
-      copyIcon: "content_copy",
+      copyIcon: "copy",
      platforms: [
        {
          name: "Email",
-          icon: "email",
+          icon: "mail",
          link: `mailto:?subject=${subject}&body=${summary}`,
        },
        {
@@ -87,11 +87,11 @@ export default defineComponent({
  methods: {
    copyAppLink() {
      copyToClipboard(this.url)
-      this.copyIcon = "done"
+      this.copyIcon = "check"
      this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
        icon: "content_paste",
      })
-      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
    },
    hideModal() {
      this.$emit("hide-modal")
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -16,11 +16,7 @@
      >
        <h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
        <div class="flex">
-          <ButtonSecondary
-            icon="close"
-            class="rounded"
-            @click.native="close()"
-          />
+          <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
        </div>
      </div>
      <div class="bg-primary border-b border-dividerLight">
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -11,7 +11,7 @@
        <i v-if="navigation.icon" class="material-icons">
          {{ navigation.icon }}
        </i>
-        <div v-if="navigation.svg" class="h-4 w-4">
+        <div v-if="navigation.svg">
          <SmartIcon :name="navigation.svg" class="svg-icons" />
        </div>
        <span v-if="LEFT_SIDEBAR">{{ navigation.title }}</span>
@@ -20,7 +20,7 @@
    <!-- <nav
      class="
        flex flex-nowrap
-        p-4
+        p-2
        items-center
        justify-center
        md:(flex-col
@@ -30,21 +30,21 @@
      <ButtonSecondary
        v-tippy="{ theme: 'tooltip', placement: 'top' }"
        :title="`${$t('app.search')} <kbd>/</kbd>`"
-        icon="search"
+        svg="search"
        class="rounded"
        @click.native="showSearch = true"
      />
      <ButtonSecondary
        v-tippy="{ theme: 'tooltip', placement: 'top' }"
        :title="$t('app.invite')"
-        icon="person_add_alt"
+        svg="user-plus"
        class="rounded"
        @click.native="showShare = true"
      />
      <ButtonSecondary
        v-tippy="{ theme: 'tooltip', placement: 'top' }"
        :title="`${$t('support.title')} <kbd>?</kbd>`"
-        icon="support"
+        svg="life-buoy"
        class="rounded"
        @click.native="showSupport = true"
      />
@@ -90,7 +90,7 @@ export default defineComponent({
      primaryNavigation: [
        {
          target: "index",
-          icon: "settings_ethernet",
+          svg: "link-2",
          title: this.$t("navigation.rest"),
        },
        {
@@ -100,17 +100,17 @@ export default defineComponent({
        },
        {
          target: "realtime",
-          icon: "language",
+          svg: "globe",
          title: this.$t("navigation.realtime"),
        },
        {
          target: "documentation",
-          icon: "book",
+          svg: "book-open",
          title: this.$t("navigation.doc"),
        },
        {
          target: "settings",
-          icon: "settings",
+          svg: "settings",
          title: this.$t("navigation.settings"),
        },
      ],
@@ -158,6 +158,8 @@ export default defineComponent({
  span {
    @apply mt-2;
    @apply font-font-medium;
+
+    font-size: 90%;
  }

  &.exact-active-link {
--- a/components/app/Support.vue
+++ b/components/app/Support.vue
@@ -7,7 +7,7 @@
    <template #body>
      <div class="flex flex-col space-y-2">
        <SmartItem
-          icon="menu_book"
+          svg="book"
          :label="$t('app.documentation')"
          to="https://docs.hoppscotch.io"
          :description="$t('support.documentation')"
@@ -17,7 +17,7 @@
          @click.native="hideModal()"
        />
        <SmartItem
-          icon="keyboard"
+          svg="zap"
          :label="$t('app.keyboard_shortcuts')"
          :description="$t('support.shortcuts')"
          info-icon="chevron_right"
@@ -28,7 +28,7 @@
          "
        />
        <SmartItem
-          icon="auto_awesome"
+          svg="gift"
          :label="$t('app.whats_new')"
          to="https://docs.hoppscotch.io/changelog"
          :description="$t('support.changelog')"
@@ -38,7 +38,7 @@
          @click.native="hideModal()"
        />
        <SmartItem
-          icon="contact_support"
+          svg="message-circle"
          :label="$t('app.chat_with_us')"
          :description="$t('support.chat')"
          info-icon="chevron_right"