swap over to ObsidianIcon.svelte

CHANGELOG.md

@@ -14,14 +14,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added the option to wrap page links in parenthesis when creating tasks with the command. You may find this useful if you primarily use Todoist on mobile where links are less obvious. Thanks to [@ThDag](https://github.com/ThDag) for the contribution!
 - You can now use the `{{filename}}` placeholder in the filter property. This will be replaced with the name of the file where the query is defined.
   - For example, if the full file path is `My Vault/Notes/How to Take Smart Notes.md` then the replaced file name will be `How to Take Smart Notes`.
-- Create "Add item" button to rendered queries. This will open the task creatio modal.
+- Added "Add item" button to rendered queries. This will open the task creation modal.
 
 ### 🔁 Changes
 
 - You can now toggle whether or not task descriptions are rendered for each task.
 - Change the style of the sync button to match the Obsidian style of the "edit" codeblock button.
 - Fix intent level to match standard markdown levels in order to have consistent style.
 - Aligned the grouping behaviour with Todoist's when grouping by project. This will be expanded on in a future release.
+- Changed all icons to be part of the Lucide set to align with Obsidian.
 
 ## [1.11.1] - 2023-04-09
 

src/components/ObsidianIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { setIcon } from "obsidian";
+  import { onMount } from "svelte";
+
+  export let iconId: string;
+  export let size: number | undefined = undefined;
+
+  let clazz: string | undefined = undefined;
+  export { clazz as class };
+
+  let containerEl: HTMLDivElement;
+
+  onMount(() => {
+    setIcon(containerEl, iconId, size);
+  });
+</script>
+
+<div bind:this={containerEl} class={clazz} />
+
+<style>
+  div {
+    display: flex;
+    align-items: center;
+  }
+</style>

src/ui/TaskRenderer.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
-  import CalendarIcon from "../components/icons/CalendarIcon.svelte";
-  import LabelIcon from "../components/icons/LabelIcon.svelte";
-  import ProjectIcon from "../components/icons/ProjectIcon.svelte";
   import MarkdownRenderer from "../components/MarkdownRenderer.svelte";
   import { showTaskContext } from "../contextMenu";
   import { settings } from "../settings";
@@ -12,6 +9,7 @@
   import { getDueDateInfo, type DueDateInfo } from "../api/domain/dueDate";
   import type { CalendarSpec } from "moment";
   import { getTaskActions } from "./contexts";
+  import ObsidianIcon from "../components/ObsidianIcon.svelte";
 
   const dateOnlyCalendarSpec: CalendarSpec = {
     sameDay: "[Today]",
@@ -147,27 +145,27 @@
   {/if}
   <div class="task-metadata">
     {#if shouldRenderProject}
-      <div class="task-project">
+      <div class="task-metadata-item">
         {#if $settings.renderProjectIcon}
-          <ProjectIcon class="task-project-icon" />
+          <ObsidianIcon iconId="inbox" />
         {/if}
-        {projectLabel}
+        <span>{projectLabel}</span>
       </div>
     {/if}
     {#if shouldRenderDueDate}
-      <div class="task-date {dateTimeClass}">
+      <div class="task-metadata-item {dateTimeClass}">
         {#if $settings.renderDateIcon}
-          <CalendarIcon class="task-calendar-icon" />
+          <ObsidianIcon iconId="calendar" />
         {/if}
-        {dateLabel}
+        <span>{dateLabel}</span>
       </div>
     {/if}
     {#if shouldRenderLabels}
-      <div class="task-labels">
+      <div class="task-metadata-item">
         {#if $settings.renderLabelsIcon}
-          <LabelIcon class="task-labels-icon" />
+          <ObsidianIcon iconId="tag" />
         {/if}
-        {labels}
+        <span>{labels}</span>
       </div>
     {/if}
   </div>

src/ui/TodoistQuery.svelte

@@ -11,6 +11,7 @@
   import TaskListRoot from "./TaskListRoot.svelte";
   import { Notice } from "obsidian";
   import { setTaskActions } from "./contexts";
+  import ObsidianIcon from "../components/ObsidianIcon.svelte";
 
   export let query: Query;
   export let todoistAdapter: TodoistAdapter;
@@ -114,25 +115,11 @@
   }}
   aria-label="Refresh list"
 >
-  <svg
-    class={fetching
-      ? "svg-icon lucide-code-2 todoist-refresh-spin"
-      : "svg-icon lucide-code-2"}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    ><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path
-      d="M3 3v5h5"
-    /><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" /><path
-      d="M16 16h5v5"
-    />
-  </svg>
+  <ObsidianIcon
+    class={fetching ? "todoist-refresh-spin" : ""}
+    iconId="refresh-ccw"
+    size={24}
+  />
 </div>
 <div
   class="edit-block-button todoist-add-button"
@@ -141,18 +128,7 @@
   }}
   aria-label="Add item"
 >
-  <svg
-    class="svg-icon lucide-code-2"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg
-  >
+  <ObsidianIcon iconId="plus" size={24} />
 </div>
 <br />
 {#if fetchedOnce}

styles.css

@@ -17,6 +17,14 @@
 .markdown-reading-view .todoist-refresh-button {
   float: right;
   margin-left: 8px;
+  color: var(--text-muted);
+  border-radius: var(--radius-s);
+  padding: var(--size-2-2) var(--size-2-3);
+}
+
+.markdown-reading-view .todoist-add-button:hover,
+.markdown-reading-view .todoist-refresh-button:hover {
+  background-color: var(--background-modifier-hover);
 }
 
 .todoist-refresh-disabled {
@@ -41,18 +49,19 @@
 
 .is-live-preview .task-metadata,
 .is-live-preview .todoist-task-description {
-  margin-left: 28px;
+  margin-left: 26px;
+}
+
+.task-metadata-item {
+  display: flex;
+  align-items: center;
 }
 
-.task-calendar-icon,
-.task-project-icon,
-.task-labels-icon {
-  vertical-align: middle;
-  height: 17px;
-  width: 17px;
+.task-metadata-item > * + * {
+  margin-left: 0.25rem;
 }
 
-.task-date.task-overdue {
+.task-metadata-item.task-overdue {
   color: var(--text-error);
 }