improve(ui): update built-in icon mode

resources/css/common.css

@@ -141,7 +141,7 @@ html[data-theme='light'] {
   --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2);
   --ls-head-text-color: var(--ls-link-text-color);
   --ls-cloze-text-color: #0000cd;
-  --ls-icon-color: #908e8b;
+  --ls-icon-color: #646464;
   --ls-search-icon-color: var(--ls-icon-color);
   --ls-a-chosen-bg: #f7f7f7;
   --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
@@ -174,10 +174,6 @@ body {
   word-break: break-word; /* compatible for overflow-wrap: anywhere */
 }
 
-a svg {
-  color: var(--ls-icon-color);
-}
-
 svg {
   pointer-events: none;
 }

resources/electron.html

@@ -52,6 +52,7 @@ const portal = new MagicPortal(worker);
 <script defer src="./js/interact.min.js"></script>
 <script defer src="./js/lsplugin.core.js"></script>
 <script defer src="./js/main.js"></script>
+<script defer src="./js/tabler.min.js"></script>
 <script defer src="./js/code-editor.js"></script>
 <script defer src="./js/age-encryption.js"></script>
 <script defer src="./js/excalidraw.js"></script>

resources/index.html

@@ -51,6 +51,7 @@ const portal = new MagicPortal(worker);
 <script defer src="./js/interact.min.js"></script>
 <script defer src="./js/lsplugin.core.js"></script>
 <script defer src="./js/main.js"></script>
+<script defer src="./js/tabler.min.js"></script>
 <script defer src="./js/code-editor.js"></script>
 <script defer src="./js/age-encryption.js"></script>
 <script defer src="./js/excalidraw.js"></script>

src/main/frontend/components/encryption.cljs

@@ -141,7 +141,7 @@
 
     [:div.encryption-password.max-w-2xl.-mb-2
      [:div.cp__file-sync-related-normal-modal
-      [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "lock-access")]]
+      [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "lock-access" {:size 28})]]
 
       [:div.mt-3.text-center.sm:mt-0.sm:text-left
        [:h1#modal-headline.text-2xl.font-bold.text-center
@@ -160,7 +160,7 @@
          [:div.folder-tip.flex.flex-col.items-center
           [:h3
            [:span.flex.space-x-2.leading-none.pb-1
-            (ui/icon "cloud-lock")
+            (ui/icon "cloud-lock" {:size 20})
             [:span GraphName]
             [:span.scale-75 (ui/icon "arrow-right")]
             [:span (ui/icon "folder")]]]
@@ -169,10 +169,10 @@
          [:div.input-hints.text-sm.py-2.px-3.rounded.mb-2.mt-2.flex.items-center
           (if-let [display-str (:fail set-remote-graph-pwd-result)]
             [:<>
-             [:span.scale-125.pr-1.text-red-600 (ui/icon "alert-circle" {:class "text-md mr-1"})]
+             [:span.flex.pr-1.text-red-600 (ui/icon "alert-circle" {:class "text-md mr-1"})]
              [:span.text-red-600 display-str]]
             [:<>
-             [:span.scale-125.pr-1 (ui/icon "bulb" {:class "text-md mr-1"})]
+             [:span.flex.pr-1 (ui/icon "bulb" {:class "text-md mr-1"})]
              [:span "Please enter the password for this graph to continue syncing."]])]])
 
       ;; secure this remote graph
@@ -186,9 +186,9 @@
                     (not (string/blank? @*pw-confirm)))
               (if (or (not (pattern-ok?))
                       (not= @*password @*pw-confirm))
-                [:span.scale-125.pr-1.text-red-600 (ui/icon "alert-circle" {:class "text-md mr-1"})]
-                [:span.scale-125.pr-1.text-green-600 (ui/icon "circle-check" {:class "text-md mr-1"})])
-              [:span.scale-125.pr-1 (ui/icon "bulb" {:class "text-md mr-1"})])
+                [:span.flex.pr-1.text-red-600 (ui/icon "alert-circle" {:class "text-md mr-1"})]
+                [:span.flex.pr-1.text-green-600 (ui/icon "circle-check" {:class "text-md mr-1"})])
+              [:span.flex.pr-1 (ui/icon "bulb" {:class "text-md mr-1"})])
 
             (if (not (string/blank? @*password))
               (if-not (pattern-ok?)
@@ -252,7 +252,7 @@
       (when init-graph-keys
         [:div.init-remote-pw-tips.space-x-4.pt-2.hidden.sm:flex
          [:div.flex-1.flex.items-center
-          [:span.px-3.scale-125 (ui/icon "key")]
+          [:span.px-3.flex (ui/icon "key")]
           [:p.dark:text-gray-100
            [:span "Please make sure you "]
            "remember the password you have set, "
@@ -261,7 +261,7 @@
            [:span "of the password."]]]
 
          [:div.flex-1.flex.items-center
-          [:span.px-3.scale-125 (ui/icon "lock")]
+          [:span.px-3.flex (ui/icon "lock")]
           [:p.dark:text-gray-100
            "If you lose your password, all of your data in the cloud can’t be decrypted. "
            [:span "You will still be able to access the local version of your graph."]]]])]

src/main/frontend/components/file_sync.cljs

@@ -142,7 +142,7 @@
                                      (state/get-repos))))))))]
 
     [:div.cp__file-sync-related-normal-modal
-     [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "cloud-upload")]]
+     [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "cloud-upload" {:size 20})]]
 
      [:h1.text-xl.font-semibold.opacity-90.text-center.py-2
       "Are you sure you want to create a new remote graph?"]
@@ -250,12 +250,11 @@
                                              :queuing queuing?
                                              :idle    (and (not queuing?) idle?)}])}
                [:span.flex.items-center
-                (ui/icon "cloud"
-                         {:style {:fontSize ui/icon-size}})]]
+                (ui/icon "cloud" {:size ui/icon-size})]]
 
               [:a.button.cloud.off
                {:on-click turn-on}
-               (ui/icon "cloud-off" {:style {:fontSize ui/icon-size}})]))
+               (ui/icon "cloud-off" {:size ui/icon-size})]))
 
           (cond-> []
             synced-file-graph?
@@ -265,8 +264,9 @@
                         [:span.opacity-60 "Everything is synced!"]]
                  :as-link? false}]
                (if need-password?
-                 [{:title   [:div.file-item
-                             (ui/icon "lock") "Password is required"]
+                 [{:title   [:div.file-item.flex
+                             (ui/icon "lock")
+                             [:span.pl-1 "Password is required"]]
                    :options {:on-click fs-sync/sync-need-password!}}]
                  [{:title   [:div.file-item.is-first ""]
                    :options {:class "is-first-placeholder"}}]))
@@ -589,7 +589,7 @@
   [close-fn]
 
   [:div.cp__file-sync-related-normal-modal
-   [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "checkup-list")]]
+   [:div.flex.justify-center.pb-4 [:span.icon-wrap (ui/icon "checkup-list" {:size 28})]]
 
    [:h1.text-xl.font-semibold.opacity-90.text-center.py-2
     [:span.dark:opacity-80 "Congrats on your first successful sync!"]]
@@ -604,7 +604,7 @@
 
    [:div.cloud-tip.rounded-md.mt-6.py-4
     [:div.items-center.opacity-90.flex.justify-center
-     [:span.pr-2 (ui/icon "bell-ringing" {:class "font-semibold"})]
+     [:span.pr-2.flex (ui/icon "bell-ringing" {:class "font-semibold"})]
      [:strong "Logseq Sync is still in Beta and we're working on a Pro plan!"]]
 
     ;; [:ul.flex.py-6.px-4

src/main/frontend/components/header.cljs

@@ -31,7 +31,7 @@
                    (when (mobile-util/native-iphone?)
                      (state/set-left-sidebar-open! false))
                    (route-handler/redirect-to-home!))}
-     (ui/icon "home" {:style {:fontSize ui/icon-size}})]))
+     (ui/icon "home" {:size ui/icon-size})]))
 
 (rum/defc login < rum/reactive
   < {:key-fn #(identity "login-button")}
@@ -55,7 +55,7 @@
     [:button.#left-menu.cp__header-left-menu.button.icon
      {:title "Toggle left menu"
       :on-click on-click}
-     (ui/icon "menu-2" {:style {:fontSize ui/icon-size}})]))
+     (ui/icon "menu-2" {:size ui/icon-size})]))
 
 (rum/defc dropdown-menu < rum/reactive
   < {:key-fn #(identity "repos-dropdown-menu")}
@@ -68,7 +68,7 @@
        [:button.button.icon.toolbar-dots-btn
         {:on-click toggle-fn
          :title "More"}
-        (ui/icon "dots" {:style {:fontSize ui/icon-size}})])
+        (ui/icon "dots" {:size ui/icon-size})])
      (->>
       [(when (state/enable-editing?)
          {:title (t :settings)
@@ -118,12 +118,12 @@
    (ui/with-shortcut :go/backward "bottom"
      [:button.it.navigation.nav-left.button.icon
       {:title "Go back" :on-click #(js/window.history.back)}
-      (ui/icon "arrow-left" {:style {:fontSize ui/icon-size}})])
+      (ui/icon "arrow-left" {:size ui/icon-size})])
 
    (ui/with-shortcut :go/forward "bottom"
      [:button.it.navigation.nav-right.button.icon
       {:title "Go forward" :on-click #(js/window.history.forward)}
-      (ui/icon "arrow-right" {:style {:fontSize ui/icon-size}})])])
+      (ui/icon "arrow-right" {:size ui/icon-size})])])
 
 (rum/defc updater-tips-new-version
   [t]
@@ -186,7 +186,7 @@
                                         (mobile-util/native-iphone?))
                                 (state/set-left-sidebar-open! false))
                               (state/pub-event! [:go/search]))}
-              (ui/icon "search" {:style {:fontSize ui/icon-size}})]))])
+              (ui/icon "search" {:size ui/icon-size})]))])
       (when (mobile-util/native-platform?)
         (if (or (state/home?) custom-home-page?)
           left-menu

src/main/frontend/components/header.css

@@ -1,5 +1,6 @@
 .cp__header {
   @apply z-10;
+
   -webkit-app-region: drag;
 
   padding-top: var(--ls-headbar-inner-top-padding);
@@ -17,7 +18,8 @@
   white-space: nowrap;
 
   > .l {
-    @apply pl-4;
+    @apply pl-2;
+    
     width: var(--ls-left-sidebar-width);
     height: 100%;
     align-items: center;
@@ -38,10 +40,6 @@
     transform: translate3d(0, 0, 0);
   }
 
-  .it svg {
-    transform: scale(0.8);
-  }
-
   .button {
     display: flex;
     align-items: center;
@@ -130,10 +128,6 @@
   }
 }
 
-.cp__header .navigation svg {
-  transform: scale(0.7);
-}
-
 .is-electron.is-mac.is-fullscreen .cp__header > .l {
   padding-left: 1rem;
 }
@@ -178,8 +172,14 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 15ch;
+  max-width: 20ch;
   height: 14px;
+
+  .ui__icon {
+    position: relative;
+    top: 5px;
+    right: -1px;
+  }
 }
 
 .button {

src/main/frontend/components/page.cljs

@@ -920,7 +920,7 @@
              [:a.button.journal
               {:class    (util/classnames [{:active (boolean @*journal?)}])
                :on-click #(reset! *journal? (not @*journal?))}
-              (ui/icon "calendar" {:style {:fontSize ui/icon-size}})])]
+              (ui/icon "calendar" {:size ui/icon-size})])]
 
            [:div.paginates
             [:span.flex.items-center
@@ -936,7 +936,7 @@
             (fn [{:keys [toggle-fn]}]
               [:a.button.fade-link
                {:on-click toggle-fn}
-               (ui/icon "dots" {:style {:fontSize ui/icon-size}})])
+               (ui/icon "dots" {:size ui/icon-size})])
             [{:title (t :remove-orphaned-pages)
               :options {:on-click (fn []
                                     (let [orphaned-pages (model/get-orphaned-pages {})

src/main/frontend/components/page.css

@@ -132,13 +132,15 @@
     }
 
     .r {
-      font-size: 14px;
-
+      @apply text-base space-x-2;
+      
       a.button {
         color: var(--ls-primary-text-color);
         margin-top: 1px;
         height: unset;
         padding: 4px;
+        display: flex;
+        align-items: center;
 
         &.active {
           opacity: 1;
@@ -325,9 +327,7 @@ html.is-native-ios {
   .cp__all_pages {
     .actions > .r {
       position: relative;
-      padding: 15px 0;
-      padding-right: 10px;
-      padding-bottom: 25px;
+      padding: 15px 10px 25px 0;
       justify-content: space-between;
 
       .paginates {

src/main/frontend/components/plugins.cljs

@@ -132,12 +132,12 @@
 
   [:div.secondary-tabs.categories
    (ui/button
-    [:span (ui/icon "puzzle") (t :plugins)]
+    [:span.flex.items-center (ui/icon "puzzle") (t :plugins)]
     :intent "logseq"
     :on-click #(on-action :plugins)
     :class (if (= category :plugins) "active" ""))
    (ui/button
-    [:span (ui/icon "palette") (t :themes)]
+    [:span.flex.items-center (ui/icon "palette") (t :themes)]
     :intent "logseq"
     :on-click #(on-action :themes)
     :class (if (= category :themes) "active" ""))])
@@ -232,8 +232,10 @@
        [:strong (ui/icon "coffee")]
        [:ul.menu-list
         (for [link sponsors]
-          [:li [:a {:href link :target "_blank"}
-                [:span.flex.items-center link (ui/icon "external-link")]]])]])]
+          [:li {:key link}
+           [:a {:href link :target "_blank"}
+            [:span.flex.items-center link (ui/icon "external-link")]]])
+        ]])]
 
    [:div.r.flex.items-center
     (when (and unpacked? (not disabled?))
@@ -438,7 +440,8 @@
          (ui/tippy {:html  [:div (t :plugin/unpacked-tips)]
                     :arrow true}
                    (ui/button
-                    [:span (ui/icon "upload") (t :plugin/load-unpacked)]
+                    [:span.flex.items-center
+                     (ui/icon "upload") (t :plugin/load-unpacked)]
                     :intent "logseq"
                     :class "load-unpacked"
                     :on-click plugin-handler/load-unpacked-plugin))
@@ -534,21 +537,21 @@
           :intent "link"))
 
        (concat (if market?
-                 [{:title   [:span (ui/icon "rotate-clockwise") (t :plugin/refresh-lists)]
+                 [{:title   [:span.flex.items-center (ui/icon "rotate-clockwise") (t :plugin/refresh-lists)]
                    :options {:on-click #(reload-market-fn)}}]
-                 [{:title   [:span (ui/icon "rotate-clockwise") (t :plugin/check-all-updates)]
+                 [{:title   [:span.flex.items-center (ui/icon "rotate-clockwise") (t :plugin/check-all-updates)]
                    :options {:on-click #(plugin-handler/check-enabled-for-updates (not= :plugins category))}}])
 
-               [{:title   [:span (ui/icon "world") (t :settings-page/network-proxy)]
+               [{:title   [:span.flex.items-center (ui/icon "world") (t :settings-page/network-proxy)]
                  :options {:on-click #(state/pub-event! [:go/proxy-settings agent-opts])}}]
 
                (when (state/developer-mode?)
                  [{:hr true}
-                  {:title   [:span (ui/icon "file-code") "Open Preferences"]
+                  {:title   [:span.flex.items-center (ui/icon "file-code") "Open Preferences"]
                    :options {:on-click
                              #(p/let [root (plugin-handler/get-ls-dotdir-root)]
                                 (js/apis.openPath (str root "/preferences.json")))}}
-                  {:title   [:span (ui/icon "bug") "Open " [:code " ~/.logseq"]]
+                  {:title   [:span.flex.items-center (ui/icon "bug") "Open " [:code " ~/.logseq"]]
                    :options {:on-click
                              #(p/let [root (plugin-handler/get-ls-dotdir-root)]
                                 (js/apis.openPath root))}}]))
@@ -852,7 +855,7 @@
    (fn [{:keys [toggle-fn]}]
      [:div.toolbar-plugins-manager
       {:on-click toggle-fn}
-      [:a.button (ui/icon "puzzle")]])
+      [:a.button (ui/icon "puzzle" {:size 20})]])
 
    ;; items
    (for [[_ {:keys [key pinned?] :as opts} pid] items

src/main/frontend/components/repo.cljs

@@ -164,7 +164,7 @@
                           {:title        [:span.flex.items-center.whitespace-nowrap short-repo-name
                                           (when remote? [:span.pl-1
                                                          {:title (str "<" GraphName "> #" GraphUUID)}
-                                                         (ui/icon "cloud")])]
+                                                         (ui/icon "cloud" {:size 18})])]
                            :hover-detail repo-path ;; show full path on hover
                            :options      {:on-click (fn [e]
                                                       (if (gobj/get e "shiftKey")

src/main/frontend/components/settings.cljs

@@ -517,6 +517,7 @@
               (when-let [e (and protocol host port (str protocol "://" host ":" port))]
                 [:strong.pr-1 e])
               (ui/icon "edit")]
+             :small? true
              :on-click #(state/set-sub-modal!
                          (fn [_] (plugins/user-proxy-settings-panel agent-opts))
                          {:id :https-proxy-panel :center? true})))

src/main/frontend/components/settings.css

@@ -15,7 +15,7 @@
 
   &-inner {
     @apply flex flex-col md:flex-row;
-    
+
     > aside {
       border-right: 0 solid var(--ls-quaternary-background-color);
       border-bottom: 1px solid var(--ls-quaternary-background-color);
@@ -44,7 +44,7 @@
               width: 20px;
               height: 20px;
               overflow: hidden;
-              opacity: .6;
+              opacity: .8;
             }
 
             > strong {
@@ -299,22 +299,22 @@ html.is-native-android,
 html.is-native-iphone,
 html.is-native-iphone-without-notch {
 
-    .cp__settings-inner {
-        > article {
-            padding-bottom: 0px;
-        }
+  .cp__settings-inner {
+    > article {
+      padding-bottom: 0px;
+    }
 
-        .panel-wrap {
-            padding-bottom: 0px;
-        }
+    .panel-wrap {
+      padding-bottom: 0px;
     }
+  }
 }
 
 svg.git {
-    margin-left: -4px;
-    transform: scale(0.9);
+  margin-left: -4px;
+  transform: scale(0.9);
 }
 
 svg.cmd {
-    margin-left: -1px;
+  margin-left: -1px;
 }

src/main/frontend/components/sidebar.cljs

@@ -70,19 +70,21 @@
 (rum/defc page-name
   [name icon recent?]
   (let [original-name (db-model/get-page-original-name name)]
-    [:a {:on-click (fn [e]
-                     (let [name (util/safe-page-name-sanity-lc name)
-                           source-page (db-model/get-alias-source-page (state/get-current-repo) name)
-                           name (if (empty? source-page) name (:block/name source-page))]
-                       (if (gobj/get e "shiftKey")
-                         (when-let [page-entity (if (empty? source-page) (db/entity [:block/name name]) source-page)]
-                           (state/sidebar-add-block!
-                            (state/get-current-repo)
-                            (:db/id page-entity)
-                            :page))
-                         (route-handler/redirect-to-page! name {:click-from-recent? recent?}))))}
+    [:a.flex.items-center
+     {:on-click
+      (fn [e]
+        (let [name        (util/safe-page-name-sanity-lc name)
+              source-page (db-model/get-alias-source-page (state/get-current-repo) name)
+              name        (if (empty? source-page) name (:block/name source-page))]
+          (if (gobj/get e "shiftKey")
+            (when-let [page-entity (if (empty? source-page) (db/entity [:block/name name]) source-page)]
+              (state/sidebar-add-block!
+               (state/get-current-repo)
+               (:db/id page-entity)
+               :page))
+            (route-handler/redirect-to-page! name {:click-from-recent? recent?}))))}
      [:span.page-icon icon]
-     (pdf-assets/fix-local-asset-filename original-name)]))
+     [:span.page-title (pdf-assets/fix-local-asset-filename original-name)]]))
 
 (defn get-page-icon [page-entity]
   (let [default-icon (ui/icon "file-text")
@@ -126,8 +128,8 @@
   [t]
   (nav-content-item
    [:a.flex.items-center.text-sm.font-medium.rounded-md.wrap-th
-    (ui/icon "star mr-1" {:style {:font-size 16}})
-    [:span.flex-1.ml-1 (string/upper-case (t :left-side-bar/nav-favorites))]]
+    (ui/icon "star" {:size 16})
+    [:span.flex-1.ml-2 (string/upper-case (t :left-side-bar/nav-favorites))]]
 
    {:class "favorites"
     :edit-fn
@@ -150,8 +152,8 @@
   [t]
   (nav-content-item
    [:a.flex.items-center.text-sm.font-medium.rounded-md.wrap-th
-    (ui/icon "history mr-2" {:style {:font-size 16}})
-    [:span.flex-1
+    (ui/icon "history" {:size 16})
+    [:span.flex-1.ml-2
      (string/upper-case (t :left-side-bar/nav-recent-pages))]]
 
    {:class "recent"}
@@ -238,7 +240,7 @@
         [:div.fake-bar.absolute
          [:button
           {:on-click state/toggle-left-sidebar!}
-          (ui/icon "menu-2" {:style {:fontSize ui/icon-size}})]])
+          (ui/icon "menu-2" {:size ui/icon-size})]])
 
       [:nav.px-4.flex.flex-col.gap-1
        {:aria-label "Navigation menu"}
@@ -299,7 +301,7 @@
                        (and (util/sm-breakpoint?)
                             (state/toggle-left-sidebar!))
                        (state/pub-event! [:go/search]))}
-          (ui/icon "circle-plus mr-3" {:style {:font-size 20}})
+          (ui/icon "circle-plus" {:style {:font-size 20}})
           [:span.flex-1 (t :right-side-bar/new-page)]])]]]))
 
 (rum/defc left-sidebar < rum/reactive

src/main/frontend/components/sidebar.css

@@ -45,12 +45,12 @@
 }
 
 #main-container {
-    /* Hack: (overflow-y) to fix sticky header not working */
-    /* To reproduce: quick creating blocks */
-    overflow-y: hidden;
-    position: relative;
-    height: 100%;
-    transition: padding-left .3s;
+  /* Hack: (overflow-y) to fix sticky header not working */
+  /* To reproduce: quick creating blocks */
+  overflow-y: hidden;
+  position: relative;
+  height: 100%;
+  transition: padding-left .3s;
 
   &.is-left-sidebar-open {
     padding-left: 0;
@@ -114,11 +114,11 @@
   .page-icon {
     @apply mr-1 align-baseline;
     width: 16px;
-    height: 16px;
+    height: 18px;
     text-align: center;
     display: inline-block;
     line-height: 1em;
-    color: var(--ls-icon-color);
+    opacity: .6;
   }
 
   a.item {
@@ -130,7 +130,7 @@
     > .ti {
       font-size: 16px;
       margin-right: 8px;
-      opacity: .6;
+      opacity: .9;
       position: relative;
     }
 
@@ -228,13 +228,16 @@
         a {
           width: 100%;
           padding: 2px 24px;
-          display: block;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
           color: var(--ls-primary-text-color);
           transition: background-color .3s;
 
+          .page-title {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex-grow: 1;
+          }
+
           &:hover {
             background-color: var(--ls-quaternary-background-color);
           }
@@ -365,9 +368,6 @@
 }
 
 .ls-left-sidebar-open {
-  .cp__header > .r {
-    display: none;
-  }
 
   @screen sm {
     .cp__header > .r {

src/main/frontend/mobile/footer.cljs

@@ -17,7 +17,7 @@
                      (command-handler))}
    (if (= icon "player-stop")
      svg/circle-stop
-     (ui/icon icon {:style {:fontSize ui/icon-size}}))])
+     (ui/icon icon {:size ui/icon-size}))])
 
 (defn seconds->minutes:seconds
   [seconds]

src/main/frontend/mobile/mobile_bar.cljs

@@ -37,7 +37,7 @@
     {:on-mouse-down (fn [e]
                       (util/stop e)
                       (editor-handler/indent-outdent indent?))}
-    (ui/icon icon {:style {:fontSize ui/icon-size}})]])
+    (ui/icon icon {:size ui/icon-size})]])
 
 (rum/defc command
   [command-handler icon & [count? event?]]
@@ -50,7 +50,7 @@
                       (if event?
                         (command-handler e)
                         (command-handler)))}
-    (ui/icon icon {:style {:fontSize ui/icon-size}})]])
+    (ui/icon icon {:size ui/icon-size})]])
 
 (rum/defc timestamp-submenu
   [parent-id]
@@ -71,7 +71,7 @@
                         (set-command-stats :calendar)
                         (let [target (gdom/getNextElementSibling (.-target event))]
                           (dom/add-class! target "show-submenu")))}
-      (ui/icon "calendar" {:style {:fontSize ui/icon-size}})
+      (ui/icon "calendar" {:size ui/icon-size})
       [:div.submenu.fixed.hidden.flex.flex-col.w-full.justify-evenly
        {:style {:bottom @util/keyboard-height}}
        (command-cp #(let [today (page-handler/get-page-ref-text (date/today))]

src/main/frontend/ui.cljs

@@ -28,6 +28,7 @@
             ["@logseq/react-tweet-embed" :as react-tweet-embed]
             ["react-intersection-observer" :as react-intersection-observer]
             [rum.core :as rum]
+            [camel-snake-kebab.core :as csk]
             [frontend.db-mixins :as db-mixins]
             [frontend.mobile.util :as mobile-util]
             [goog.functions :refer [debounce]]))
@@ -47,7 +48,7 @@
        (util/safari?)
        (js/window.scrollTo 0 0)))
 
-(defonce icon-size (if (mobile-util/native-platform?) 23 20))
+(defonce icon-size (if (mobile-util/native-platform?) 26 20))
 
 (rum/defc ls-textarea
   < rum/reactive
@@ -920,15 +921,32 @@
              :options               {:theme (when (= (state/sub :ui/theme) "dark") "dark")}
              :on-tweet-load-success #(reset! *loading? false)})]]))
 
+(def get-adapt-icon-class
+  (memoize (fn [klass]
+             (do
+               (prn "==> pick:" klass)
+               (r/adapt-class klass)))))
+
 (defn icon
   ([class] (icon class nil))
-  ([class {:keys [extension?] :as opts}]
-   [:i (merge {:class (util/format
-                       (str "%s-" class
-                            (when (:class opts)
-                              (str " " (string/trim (:class opts)))))
-                       (if extension? "tie tie" "ti ti"))}
-              (dissoc opts :class :extension?))]))
+  ([class {:keys [extension? font?] :as opts}]
+   (when-not (string/blank? class)
+     (let [^js _tablerIcons (gobj/get js/window "tablerIcons")]
+       (if (or extension? font? (not _tablerIcons))
+         [:i (merge {:class
+                     (util/format
+                      (str "%s-" class
+                           (when (:class opts)
+                             (str " " (string/trim (:class opts)))))
+                      (if extension? "tie tie" "ti ti"))}
+                    (dissoc opts :class :extension?))]
+
+         ;; tabler svg react
+         (when-let [klass (gobj/get js/tablerIcons (str "Icon" (csk/->PascalCase class)))]
+           (let [f (get-adapt-icon-class klass)]
+             [:span.ui__icon.ti
+              {:class (str "ls-icon-" class)}
+              (f (merge {:size 18} (r/map-keys->camel-case opts)))])))))))
 
 (rum/defc with-shortcut < rum/reactive
   < {:key-fn (fn [key pos] (str "shortcut-" key pos))}

src/main/frontend/ui.css

@@ -243,7 +243,7 @@ html.is-mobile {
 }
 
 .ui__button {
-  @apply items-center px-3 py-2 border border-transparent
+  @apply flex items-center px-3 py-2 border border-transparent
   text-sm leading-4 font-medium rounded-md text-white
   focus:outline-none transition ease-in-out duration-150 mt-1;
 
@@ -352,3 +352,7 @@ html.is-mobile {
 .bg-quaternary {
   background-color: var(--ls-quaternary-background-color);
 }
+
+.ui__icon {
+  display: inline-block;
+}