Merge pull request #181 from linyows/fix/support-notion-icon-type

linyows · web-flow · commit aa677cc02bb3 · 2026-03-31T16:36:22.000+09:00
fix: support Notion API icon type for page/database/callout icons
diff --git a/src/exporter/blocks.ts b/src/exporter/blocks.ts
@@ -8,7 +8,7 @@ import {
   incrementalCache,
   debug,
 } from './variables.js'
-import { FetchPage } from './page.js'
+import { FetchPage, getNotionIconUrl } from './page.js'
 import {
   createDirWhenNotfound,
   saveImage,
@@ -124,6 +124,16 @@ export const FetchBlocks = async ({ block_id, last_edited_time }: FetchBlocksArg
                 console.log(`Failed to save callout icon: ${e}`)
               }
             }
+          } else if (block.callout.icon?.type === 'icon') {
+            const url = getNotionIconUrl(block.callout.icon.icon)
+            try {
+              const ipws = await saveImage(url, `block-${block.id}`)
+              ;(block.callout as any).icon = { type: 'external', external: { url }, src: ipws.path }
+            } catch (e) {
+              if (debug) {
+                console.log(`Failed to save callout icon: ${e}`)
+              }
+            }
           }
           if (block.has_children) {
             block.children = await FetchBlocks({ block_id: block.id, last_edited_time: block.last_edited_time })
diff --git a/src/exporter/breadcrumbs.test.ts b/src/exporter/breadcrumbs.test.ts
@@ -3,6 +3,7 @@ import * as td from 'testdouble'
 import * as assert from 'uvu/assert'
 import type { FetchBreadcrumbsProps } from './breadcrumbs.js'
 import { FetchBreadcrumbs } from './breadcrumbs.js'
+import type { Breadcrumb } from './types.js'
 
 test.before(() => {
   td.replace(console, 'log')
@@ -141,23 +142,23 @@ test('FetchBreadcrumbs returns correct data structure', async () => {
 
   try {
     const result = await FetchBreadcrumbs(props)
-    
+
     // Always returns an array
     assert.ok(Array.isArray(result))
-    
+
     // Each breadcrumb should have required structure
     for (const breadcrumb of result) {
       assert.ok(typeof breadcrumb === 'object')
       assert.ok('id' in breadcrumb)
       assert.ok('name' in breadcrumb)
       assert.ok(typeof breadcrumb.id === 'string')
       assert.ok(typeof breadcrumb.name === 'string')
-      
+
       // Icon is optional but if present should have correct structure
       if ('icon' in breadcrumb && breadcrumb.icon) {
         assert.ok('type' in breadcrumb.icon)
         assert.ok(['emoji', 'external', 'file'].includes(breadcrumb.icon.type))
-        
+
         if (breadcrumb.icon.type === 'emoji') {
           assert.ok('emoji' in breadcrumb.icon)
         } else {
@@ -172,6 +173,46 @@ test('FetchBreadcrumbs returns correct data structure', async () => {
   }
 })
 
+test('Breadcrumb type allows entries without icon', () => {
+  // Pages without icon should still produce valid breadcrumb entries
+  const breadcrumb: Breadcrumb = {
+    id: 'page-without-icon',
+    name: 'No Icon Page',
+  }
+
+  assert.ok(typeof breadcrumb.id === 'string')
+  assert.ok(typeof breadcrumb.name === 'string')
+  assert.equal(breadcrumb.icon, undefined)
+})
+
+test('Breadcrumb type allows entries with emoji icon', () => {
+  const breadcrumb: Breadcrumb = {
+    id: 'page-with-emoji',
+    name: 'Emoji Page',
+    icon: {
+      type: 'emoji',
+      emoji: '📚',
+    },
+  }
+
+  assert.equal(breadcrumb.icon?.type, 'emoji')
+})
+
+test('Breadcrumb type allows entries with external icon', () => {
+  const breadcrumb: Breadcrumb = {
+    id: 'page-with-icon',
+    name: 'Icon Page',
+    icon: {
+      type: 'external',
+      src: '/images/page-icon-123.svg',
+      url: 'https://www.notion.so/icons/bookmark-outline_blue.svg',
+    },
+  }
+
+  assert.equal(breadcrumb.icon?.type, 'external')
+  assert.ok(breadcrumb.icon?.src?.includes('/images/'))
+})
+
 test('FetchBreadcrumbs supports all parent types correctly', async () => {
   const testCases: Array<{ 
     type: FetchBreadcrumbsProps['type'], 
diff --git a/src/exporter/breadcrumbs.ts b/src/exporter/breadcrumbs.ts
@@ -1,5 +1,5 @@
 import { notion, reqAPIWithBackoffAndCache } from './api.js'
-import { savePageIcon } from './page.js'
+import { savePageIcon, getNotionIconUrl } from './page.js'
 import { saveDatabaseIcon } from './database.js'
 import type {
   GetBlockResponse,
@@ -69,26 +69,27 @@ export const FetchBreadcrumbs = async ({ type, id, limit }: FetchBreadcrumbsProp
           nextType = page.parent.type
           nextID = getID(page.parent)
           const name = page.properties.title.type === 'title' ? page.properties.title.title.map(v => v.plain_text).join('') : ''
+          const breadcrumb: Breadcrumb = { id: page.id, name }
           if (page.icon?.type === 'emoji') {
-            breadcrumbs.unshift({
-              id: page.id,
-              name,
-              icon: {
-                type: page.icon.type,
-                emoji: page.icon.emoji,
-              }
-            })
+            breadcrumb.icon = {
+              type: page.icon.type,
+              emoji: page.icon.emoji,
+            }
           } else if (page.icon?.type === 'external' || page.icon?.type === 'file') {
-            breadcrumbs.unshift({
-              id: page.id,
-              name,
-              icon: {
-                type: page.icon.type,
-                src: page.icon.src,
-                url: page.icon.type === 'external' ? page.icon.external.url : page.icon.file.url,
-              }
-            })
+            breadcrumb.icon = {
+              type: page.icon.type,
+              src: page.icon.src,
+              url: page.icon.type === 'external' ? page.icon.external.url : page.icon.file.url,
+            }
+          } else if (page.icon?.type === 'icon') {
+            const url = getNotionIconUrl(page.icon.icon)
+            breadcrumb.icon = {
+              type: 'external',
+              src: page.icon.src ?? url,
+              url,
+            }
           }
+          breadcrumbs.unshift(breadcrumb)
           count++
           break
         }
@@ -104,26 +105,27 @@ export const FetchBreadcrumbs = async ({ type, id, limit }: FetchBreadcrumbsProp
           nextType = db.parent.type
           nextID = getID(db.parent)
           const name = db.title.map(v => v.plain_text).join('')
+          const breadcrumb: Breadcrumb = { id: db.id, name }
           if (db.icon?.type === 'emoji') {
-            breadcrumbs.unshift({
-              id: db.id,
-              name,
-              icon: {
-                type: db.icon.type,
-                emoji: db.icon.emoji,
-              }
-            })
+            breadcrumb.icon = {
+              type: db.icon.type,
+              emoji: db.icon.emoji,
+            }
           } else if (db.icon?.type === 'external' || db.icon?.type === 'file') {
-            breadcrumbs.unshift({
-              id: db.id,
-              name,
-              icon: {
-                type: db.icon.type,
-                src: db.icon.src,
-                url: db.icon.type === 'external' ? db.icon.external.url : db.icon.file.url,
-              }
-            })
+            breadcrumb.icon = {
+              type: db.icon.type,
+              src: db.icon.src,
+              url: db.icon.type === 'external' ? db.icon.external.url : db.icon.file.url,
+            }
+          } else if (db.icon?.type === 'icon') {
+            const url = getNotionIconUrl(db.icon.icon)
+            breadcrumb.icon = {
+              type: 'external',
+              src: db.icon.src ?? url,
+              url,
+            }
           }
+          breadcrumbs.unshift(breadcrumb)
           count++
           break
         }
diff --git a/src/exporter/database.test.ts b/src/exporter/database.test.ts
@@ -117,6 +117,28 @@ test('saveDatabaseIcon handles undefined icon gracefully', async () => {
 
   // Should not set src property when icon is undefined
   assert.equal(mockDatabase.icon, undefined)
-}) 
+})
+
+test('saveDatabaseIcon saves notion icon type and converts to external', async () => {
+  const mockDatabase = {
+    id: 'test-db-id',
+    icon: {
+      type: 'icon',
+      icon: {
+        name: 'list-indent',
+        color: 'blue',
+      },
+    }
+  } as unknown as GetDatabaseResponseEx
+
+  await saveDatabaseIcon(mockDatabase)
+
+  const icon = mockDatabase.icon as any
+  assert.equal(icon.type, 'external')
+  assert.ok(icon.src !== undefined)
+  assert.ok(icon.src.includes('/images/database-icon-test-db-id'))
+  assert.ok(icon.src.includes('.svg'))
+  assert.equal(icon.external.url, 'https://www.notion.so/icons/list-indent_blue.svg')
+})
 
-test.run() 
+test.run()
diff --git a/src/exporter/database.ts b/src/exporter/database.ts
@@ -2,6 +2,7 @@ import {
   reqAPIWithBackoff,
   notion,
 } from './api.js'
+import { getNotionIconUrl } from './page.js'
 import {
   cacheDir,
   incrementalCache,
@@ -188,6 +189,10 @@ export async function saveDatabaseIcon(db: GetDatabaseResponseEx) {
     } else if (db.icon.type === 'file') {
       const ipws = await saveImage(db.icon.file.url, `database-icon-${db.id}`)
       db.icon.src = ipws.path
+    } else if (db.icon.type === 'icon') {
+      const url = getNotionIconUrl(db.icon.icon)
+      const ipws = await saveImage(url, `database-icon-${db.id}`)
+      ;(db as any).icon = { type: 'external', external: { url }, src: ipws.path }
     }
   } catch (e) {
     if (debug) {
diff --git a/src/exporter/page.test.ts b/src/exporter/page.test.ts
@@ -2,7 +2,7 @@ import { test } from 'uvu'
 import * as td from 'testdouble'
 import * as assert from 'uvu/assert'
 import type { GetPageResponseEx, PageObjectResponseEx } from './types.js'
-import { savePageCover, savePageIcon } from './page.js'
+import { savePageCover, savePageIcon, getNotionIconUrl } from './page.js'
 
 test.before(() => {
   td.replace(console, 'log')
@@ -179,4 +179,63 @@ test('savePageIcon works with PageObjectResponseEx type', async () => {
   assert.ok((mockPage.icon as any)?.src.includes('.png'))
 })
 
-test.run() 
+test('getNotionIconUrl builds correct URL from icon name and color', () => {
+  const url = getNotionIconUrl({ name: 'bookmark-outline', color: 'blue' })
+  assert.equal(url, 'https://www.notion.so/icons/bookmark-outline_blue.svg')
+})
+
+test('getNotionIconUrl handles various icon names and colors', () => {
+  const cases = [
+    { icon: { name: 'light-bulb', color: 'gray' }, expected: 'https://www.notion.so/icons/light-bulb_gray.svg' },
+    { icon: { name: 'circle', color: 'red' }, expected: 'https://www.notion.so/icons/circle_red.svg' },
+    { icon: { name: 'bread', color: 'blue' }, expected: 'https://www.notion.so/icons/bread_blue.svg' },
+  ]
+  for (const { icon, expected } of cases) {
+    assert.equal(getNotionIconUrl(icon), expected)
+  }
+})
+
+test('savePageIcon saves notion icon type and converts to external', async () => {
+  const mockPage = {
+    id: 'test-page-id',
+    icon: {
+      type: 'icon',
+      icon: {
+        name: 'bookmark-outline',
+        color: 'blue',
+      },
+    }
+  } as unknown as GetPageResponseEx
+
+  await savePageIcon(mockPage)
+
+  // Should convert icon type to external with src set
+  const icon = mockPage.icon as any
+  assert.equal(icon.type, 'external')
+  assert.ok(icon.src !== undefined)
+  assert.ok(icon.src.includes('/images/page-icon-test-page-id'))
+  assert.ok(icon.src.includes('.svg'))
+  assert.equal(icon.external.url, 'https://www.notion.so/icons/bookmark-outline_blue.svg')
+})
+
+test('savePageIcon saves notion icon type with PageObjectResponseEx', async () => {
+  const mockPage = {
+    id: 'test-page-id',
+    icon: {
+      type: 'icon',
+      icon: {
+        name: 'circle',
+        color: 'red',
+      },
+    }
+  } as unknown as PageObjectResponseEx
+
+  await savePageIcon(mockPage)
+
+  const icon = mockPage.icon as any
+  assert.equal(icon.type, 'external')
+  assert.ok(icon.src.includes('/images/page-icon-test-page-id'))
+  assert.equal(icon.external.url, 'https://www.notion.so/icons/circle_red.svg')
+})
+
+test.run()
diff --git a/src/exporter/page.ts b/src/exporter/page.ts
@@ -120,6 +120,10 @@ export async function savePageCover(page: GetPageResponseEx | PageObjectResponse
   }
 }
 
+export function getNotionIconUrl(icon: { name: string, color: string }): string {
+  return `https://www.notion.so/icons/${encodeURIComponent(icon.name)}_${encodeURIComponent(icon.color)}.svg`
+}
+
 export async function savePageIcon(page: GetPageResponseEx | PageObjectResponseEx) {
   if (page.icon === undefined || page.icon === null) {
     return
@@ -131,6 +135,10 @@ export async function savePageIcon(page: GetPageResponseEx | PageObjectResponseE
     } else if (page.icon.type === 'file') {
       const ipws = await saveImage(page.icon.file.url, `page-icon-${page.id}`)
       page.icon.src = ipws.path
+    } else if (page.icon.type === 'icon') {
+      const url = getNotionIconUrl(page.icon.icon)
+      const ipws = await saveImage(url, `page-icon-${page.id}`)
+      ;(page as any).icon = { type: 'external', external: { url }, src: ipws.path }
     }
   } catch (e) {
     if (debug) {
diff --git a/src/exporter/types.ts b/src/exporter/types.ts
@@ -150,6 +150,7 @@ export type CalloutBlockObjectResponseEx = CalloutBlockObjectResponse & {
     | { type: 'emoji', emoji: EmojiRequest }
     | { src: string, type: 'external', external: { url: TextRequest } }
     | { src: string, type: 'file', file: { url: string, expiry_time: string } }
+    | { src: string, type: 'icon', icon: { name: string, color: string } }
   }
   children?: ListBlockChildrenResponseEx
 }
@@ -237,7 +238,7 @@ export type ParagraphBlockObjectResponseEx = ParagraphBlockObjectResponse & {
 export type Breadcrumb = {
   id: string
   name: string
-  icon: MentionIcon
+  icon?: MentionIcon
 }
 export type BreadcrumbBlockObjectResponseEx = BreadcrumbBlockObjectResponse & {
   list: Breadcrumb[]
@@ -352,6 +353,7 @@ export type GetPageResponseEx = PageObjectResponse & {
     | { src: string, type: 'emoji'; emoji: EmojiRequest }
     | { src: string, type: 'external', external: { url: string, expiry_time: string } }
     | { src: string, type: 'file', file: { url: string, expiry_time: string } }
+    | { src: string, type: 'icon', icon: { name: string, color: string } }
     | null
   meta?: GetPagePropertyResponse
 }
@@ -450,6 +452,7 @@ export type GetDatabaseResponseEx = DatabaseObjectResponse & {
     | { type: 'emoji'; emoji: EmojiRequest }
     | { src: string, type: 'external'; external: { url: TextRequest } }
     | { src: string, type: 'file'; file: { url: string; expiry_time: string } }
+    | { src: string, type: 'icon'; icon: { name: string; color: string } }
     | null
   cover:
     | { src: string, type: 'external'; external: { url: TextRequest } }
diff --git a/src/ui/components/Page/BreadcrumbBlock/Breadcrumbs.tsx b/src/ui/components/Page/BreadcrumbBlock/Breadcrumbs.tsx
@@ -16,8 +16,8 @@ const Breadcrumbs = ({ list, link, hrefs, query }: BreadcrumbsProps) => {
             link={link}
             query={query}
           >
-            {v.icon.type === 'emoji' && <span className="rotion-breadcrumb-emoji">{v.icon.emoji}</span>}
-            {v.icon.type !== 'emoji' && (
+            {v.icon?.type === 'emoji' && <span className="rotion-breadcrumb-emoji">{v.icon.emoji}</span>}
+            {v.icon && v.icon.type !== 'emoji' && (
               <img className="rotion-breadcrumb-icon" src={v.icon.src} width={20} height={20} alt={v.name} />
             )}
             <span className="rotion-breadcrumb-title">{v.name}</span>
