d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-22 23:16:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3326 from tangly1024/fix/iconfont

Browse Source 
Fix/iconfont
This commit is contained in:
tangly1024
2025-04-11 22:37:48 +08:00
committed by GitHub
parent f3278fa14e 37b6c5b3dd
commit c5c88a05f0
6 changed files with 43 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/ExternalPlugins.js
View File

@@ -10,8 +10,10 @@ import { initGoogleAdsense } from './GoogleAdsense'
import Head from 'next/head'
import ExternalScript from './ExternalScript'
import WebWhiz from './Webwhiz'
import { useGlobal } from '@/lib/global'
import IconFont from './IconFont'
/**
* 各种插件脚本
* @param {*} props
@@ -20,6 +22,7 @@ import IconFont from './IconFont'
const ExternalPlugin = props => {
// 读取自Notion的配置
const { NOTION_CONFIG } = props
const {lang} = useGlobal()
const DISABLE_PLUGIN = siteConfig('DISABLE_PLUGIN', null, NOTION_CONFIG)
const THEME_SWITCH = siteConfig('THEME_SWITCH', null, NOTION_CONFIG)
const DEBUG = siteConfig('DEBUG', null, NOTION_CONFIG)
@@ -168,8 +171,8 @@ const ExternalPlugin = props => {
}
setTimeout(() => {
// 将notion-id格式的url转成自定义slug
convertInnerUrl(props?.allNavPages)
// 映射url
convertInnerUrl({ allPages:props?.allNavPages, lang:lang })
}, 500)
}, [router])

46
components/IconFont.js
View File

@@ -10,30 +10,34 @@ export default function IconFont() {
const router = useRouter()
useEffect(() => {
loadExternalResource('/webfonts/iconfont.js').then(u => {
console.log('iconfont loaded')
loadExternalResource('/webfonts/iconfont.js')
.then(u => {
console.log('iconfont loaded');
// 查找所有 <i> 标签且 class 包含 'icon-'
const iElements = document.querySelectorAll('i[class*="icon-"]');
iElements.forEach(element => {
const className = Array.from(element.classList).find(cls => cls.startsWith('icon-'));
if (className) {
// 创建新的 <svg> 元素
const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElement.setAttribute('class', 'icon');
svgElement.setAttribute('aria-hidden', 'true');
// 查找所有 <i> 标签且 class 包含 'icon-'
const iElements = document.querySelectorAll('i[class*="icon-"]');
iElements.forEach(element => {
const className = Array.from(element.classList).find(cls => cls.startsWith('icon-'));
if (className) {
// 创建新的 <svg> 元素
const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElement.setAttribute('class', 'icon');
svgElement.setAttribute('aria-hidden', 'true');
const useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `#${className}`);
svgElement.appendChild(useElement);
const useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `#${className}`);
svgElement.appendChild(useElement);
// 替换原来的 <i> 元素
element.replaceWith(svgElement);
console.log(`Replaced <i> with class "${className}" to <svg>`);
}
// 替换原来的 <i> 元素
element.replaceWith(svgElement);
console.log(`Replaced <i> with class "${className}" to <svg>`);
}
});
})
.catch(error => {
console.warn('Failed to load iconfont.js:', error);
});
})
}, [router])
}, [router]);
return <style jsx global>
{`
@@ -43,12 +47,10 @@ export default function IconFont() {
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
svg.icon {
display: inline;
}
`}</style>
}