0.4.0

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## Version 0.4.0 (2024-04-20)
+- [feature] 支持lucide源图标 [#2](https://github.com/RavenHogWarts/obsidian-custom-sidebar-icons/issues/2)
+
 ## Version 0.3.3 (2024-04-18)
 ### 0.3.3.2
 - [updated] 增加数据迁移功能,确保用户之前的数据能够使用

README.md

@@ -15,7 +15,15 @@ This plugin allows you to customize the icons for pinned files in your Obsidian
 
 ## Usage
 
-Images can be loaded from online URLs, local relative (or absolute) file paths, base64 encoding, or inline SVG tags:
+Currently, there are two ways to set the icons, one is custom, and the other is using lucide source icons
+- Custom
+  - Custom includes using online URL, local relative (absolute) file path, base64 encoding, svg tags
+- Lucide icons
+  - This method only requires the icon name obtained from [lucide](https://lucide.dev/icons/)
+  - Importantly, the official icons also use lucide icons
+
+### Examples
+
 - Online URL
   - Example: `https://www.baidu.com/favicon.ico`
 - Local images
@@ -26,6 +34,10 @@ Images can be loaded from online URLs, local relative (or absolute) file paths,
   - Starting with `data:`
 - SVG tags
   - Enclosed within `<svg></svg>` tags
+- Lucide source icons
+  - Icon name from [lucide](https://lucide.dev/icons/)
+
+![Usage](attachment/Usage_EN.png)
 
 ## Support
 

README_ZH.md

@@ -15,7 +15,14 @@
 
 ## 使用
 
-图片支持在线URL、本地相对(绝对)文件路径、base64编码、svg标签
+目前图标的设置分为两种方式,一种是自定义,一种是lucide源图标
+- 自定义
+  - 自定义包括了使用在线URL、本地相对(绝对)文件路径、base64编码、svg标签
+- lucide图标
+  - 这种方法只需要输入在[lucide](https://lucide.dev/icons/)得到的图标名称
+  - 重要的是官方的图标使用的也是lucide的图标
+
+### 示例
 - 在线URL
   - 如：`https://www.baidu.com/favicon.ico`
 - 本地图片
@@ -26,6 +33,10 @@
   - 以`data:`开头
 - svg标签
   - 被`<svg></svg>`标签包裹
+- lucide源图标
+  - [lucide](https://lucide.dev/icons/)的icon名称
+
+![Usage](attachment/Usage_ZH.png)
 
 ## 支持
 

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "custom-sidebar-icons",
 	"name": "Custom Sidebar Icons",
-	"version": "0.3.3.2",
+	"version": "0.4.0",
 	"minAppVersion": "1.5.0",
 	"description": "Customize sidebar workspace document icons.",
 	"author": "RavenHogWarts",

src/i18n/en.ts

@@ -1,12 +1,16 @@
 import { LocalProperty } from './types';
 
 export const EN: LocalProperty = {
-  settings: "Add custom entry icon",
-  settingsDesc: "Supported image formats: Online URL or relative file path or base64 encoding or svg tag",
+  custom_settings: "Add Custom Icons",
+  custom_settingsDesc: [
+    "Custom icons can be used: Online URL or Local relative(absolute) file path or base64 encoding or svg tag.",
+    "The original icons from lucide use the icon names from [lucide](https://lucide.dev/icons/)."
+  ],
   iconLabel: "Icon #{num}",
-  svgXmlContent: "Enter svg xml content",
   fileNamePlaceholder: "Enter file name",
-  imagePlaceholder: "Enter icon Path",
+  imagePlaceholder: "Enter icon path",
+  type_custom: "Custom Icons",
+  type_lucide: "Lucide Original Icons",
   removeButton: "Remove",
-  addNewIcon: "Add new icon"
+  addNewIcon: "Add New Icon"
 };

src/i18n/types.ts

@@ -1,10 +1,11 @@
 export interface LocalProperty {
-    settings: string;
-    settingsDesc: string;
+    custom_settings: string;
+    custom_settingsDesc: string[];
     iconLabel: string;
-    svgXmlContent: string;
     fileNamePlaceholder: string;
     imagePlaceholder: string;
+    type_custom: string;
+    type_lucide: string;
     removeButton: string;
     addNewIcon: string;
 }

src/i18n/zh-tw.ts

@@ -1,12 +1,16 @@
 import { LocalProperty } from "./types";
 
 export const ZHtw: LocalProperty = {
-    settings: "新增自定義圖示",
-    settingsDesc: "支援的圖片形式: 在線URL 或 本地相對(絕對)檔案路徑 或 base64編碼 或 svg標籤",
-    iconLabel: "圖示 #{num}",
-    svgXmlContent: "請輸入SVG的XML內容",
-    fileNamePlaceholder: "輸入檔案名稱",
-    imagePlaceholder: "輸入圖示路徑",
-    removeButton: "移除",
-    addNewIcon: "新增新圖示"
-  };
+  custom_settings: "新增自定義圖標",
+  custom_settingsDesc: [
+    "自定義圖標能夠使用: 在線URL 或 本地相對(絕對)文件路徑 或 base64編碼 或 svg標籤.",
+    "lucide源圖標使用[lucide](https://lucide.dev/icons/)的圖標名稱."
+  ],
+  iconLabel: "圖標 #{num}",
+  fileNamePlaceholder: "輸入文件名稱",
+  imagePlaceholder: "輸入圖標路徑",
+  type_custom: "自定義圖標",
+  type_lucide: "lucide原始圖標",
+  removeButton: "移除",
+  addNewIcon: "新增圖標"
+};

src/i18n/zh.ts

@@ -1,12 +1,16 @@
 import { LocalProperty } from './types';
 
 export const ZH: LocalProperty = {
-  settings: "添加自定义图标",
-  settingsDesc: "支持的图片形式: 在线URL 或 本地相对(绝对)文件路径 或 base64编码 或 svg标签",
+  custom_settings: "添加自定义图标",
+  custom_settingsDesc: [
+    "自定义图标可以使用: 在线URL 或 本地相对(绝对)文件路径 或 base64编码 或 svg标签.",
+    "lucide源图标使用[lucide](https://lucide.dev/icons/)的图标名称."
+  ],
   iconLabel: "图标 #{num}",
-  svgXmlContent: "请输入SVG的XML内容",
   fileNamePlaceholder: "输入文件名称",
   imagePlaceholder: "输入图标路径",
+  type_custom: "自定义图标",
+  type_lucide: "lucide源图标",
   removeButton: "移除",
   addNewIcon: "添加新图标"
 };

src/main.ts

@@ -126,16 +126,16 @@ export class CustomIconSettingTab extends PluginSettingTab {
         const t = Locals.get();
 
         containerEl.empty();
-        containerEl.createEl('h2', { text: t.settings });
-        new Setting(containerEl).setDesc(t.settingsDesc);
-
+        containerEl.createEl('h2', { text: t.custom_settings });
+        t.custom_settingsDesc.forEach(description => {
+            containerEl.createEl('p', { text: description });
+        });
 
         this.plugin.settings.customIcons.forEach((icon, index) => {
             let previewEl: HTMLDivElement;
 
             const iconSetting = new Setting(containerEl)
                 .setName(t.iconLabel.replace('{num}', `${index + 1}`))
-                // .setDesc(t.svgXmlContent);
 
             iconSetting.addText(text => {
                 text
@@ -149,11 +149,10 @@ export class CustomIconSettingTab extends PluginSettingTab {
             });
             iconSetting.addDropdown(dropdown => {
                 dropdown
-                    .addOption('custom', "自定义")
-                    .addOption('lucide', "lucide图标")
+                    .addOption('custom', t.type_custom)
+                    .addOption('lucide', t.type_lucide)
                     .setValue(icon.type || 'custom')
                     .onChange(async (value) => {
-                        // value===''? value='custom': value=value;
                         icon.type = value;
                         await this.plugin.saveSettings();
                         let image = icon.image || EMPTY_PNG_DATA_URL;
@@ -170,10 +169,8 @@ export class CustomIconSettingTab extends PluginSettingTab {
                         icon.image = value;
                         await this.plugin.saveSettings();
                         this.plugin.refreshIcons();
-                        // updatePreview(previewEl, this.plugin.getResourcePath(icon.image.trim() || EMPTY_PNG_DATA_URL) );
                         updatePreview(previewEl, this.plugin.getResourcePathwithType((icon.image.trim() || EMPTY_PNG_DATA_URL), icon.type) );
                     })
-                // updatePreview(previewEl, this.plugin.getResourcePath(icon.image.trim() || EMPTY_PNG_DATA_URL) );
                 updatePreview(previewEl, this.plugin.getResourcePathwithType((icon.image.trim() || EMPTY_PNG_DATA_URL), icon.type) );
             });
             iconSetting.addButton(button => {