-
Notifications
You must be signed in to change notification settings - Fork 111
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
14d0b5f
commit 66be154
Showing
13 changed files
with
341 additions
and
96 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| /** | ||
| * @file Icon loader | ||
| */ | ||
|
|
||
| /** | ||
| * @description 获取图标字体资源的方式，离线方式需要将字体资源放到本地，供私有化部署使用 | ||
| */ | ||
| type Mode = 'online' | 'offline'; | ||
|
|
||
| export type FontJson = { | ||
| id: string; | ||
| name: string; | ||
| font_family: string; | ||
| css_prefix_text: string; | ||
| description: string; | ||
| glyphs: { | ||
| icon_id: string; | ||
| name: string; | ||
| font_class: string; | ||
| unicode: string; | ||
| unicode_decimal: number; | ||
| }[]; | ||
| }; | ||
|
|
||
| /** | ||
| * @description 加载 unicode json 资源 | ||
| */ | ||
| export async function loadFontJson(id: string, mode: Mode = 'online', url?: string): Promise<FontJson> { | ||
| if (mode === 'online') { | ||
| const _url = url || `https://at.alicdn.com/t/a/${id}.json`; | ||
| const json: FontJson = await fetch(_url).then(res => res.json()); | ||
| return json; | ||
| } | ||
| /** | ||
| * @description TODO offline | ||
| * @example 私有化部署示例 | ||
| * | ||
| * import font from './path/to/font.json'; | ||
| * return font; | ||
| */ | ||
| return { id: '', name: '', font_family: '', css_prefix_text: '', description: '', glyphs: [] }; | ||
| } | ||
|
|
||
| /** | ||
| * @description 加载 unicode 字体 | ||
| */ | ||
| export async function loadUnicodeFont(id: string, mode: Mode = 'online') { | ||
| if (mode === 'online') { | ||
| const fontList = [ | ||
| { | ||
| fontUrl: `//at.alicdn.com/t/a/${id}.woff2`, | ||
| format: 'woff2', | ||
| }, | ||
| { | ||
| fontUrl: `//at.alicdn.com/t/a/${id}.woff`, | ||
| format: 'woff', | ||
| }, | ||
| { | ||
| fontUrl: `//at.alicdn.com/t/a/${id}.ttf`, | ||
| format: 'truetype', | ||
| }, | ||
| ]; | ||
| const load = async (fontFamily: string, fontUrl: string) => { | ||
| const font = new FontFace(fontFamily, `url(${fontUrl})`); | ||
| await font.load(); | ||
| //@ts-ignore | ||
| document.fonts.add(font); | ||
| }; | ||
|
|
||
| await Promise.all(fontList.map(({ fontUrl }) => load('iconfont', fontUrl))); | ||
| } else { | ||
| // TODO: offline | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| export const registerFontFamily = iconLoader => { | ||
| /** 注册 font icon */ | ||
| const iconFont = iconLoader(); | ||
| const { glyphs, fontFamily } = iconFont; | ||
| const icons = glyphs.map(item => { | ||
| return { | ||
| name: item.name, | ||
| unicode: String.fromCodePoint(item.unicode_decimal), | ||
| }; | ||
| }); | ||
|
|
||
| return new Proxy(icons, { | ||
| get: (target, propKey: string) => { | ||
| const matchIcon = target.find(icon => { | ||
| return icon.name === propKey; | ||
| }); | ||
| if (!matchIcon) { | ||
| console.error(`%c fontFamily:${fontFamily},does not found ${propKey} icon`); | ||
| return ''; | ||
| } | ||
| return matchIcon?.unicode; | ||
| }, | ||
| }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| // 资源地址：https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.20&manage_type=myprojects&projectId=3381398&keyword=&project_type=&page= | ||
|
|
||
| import { createFromIconfontCN } from '@ant-design/icons'; | ||
| import { loadFontJson, loadUnicodeFont, type FontJson } from './loader'; | ||
| import { registerFontFamily } from './registerFontFamily'; | ||
|
|
||
| export const fontFamily = 'iconfont'; | ||
|
|
||
| // --- 注册 font icon --- | ||
|
|
||
| let icons = registerFontFamily(() => ({ fontFamily, glyphs: [] })); | ||
| let glyphs: FontJson['glyphs'] = []; | ||
|
|
||
| async function loadFontsJson(ids: string[]) { | ||
| const fonts = await Promise.all(ids.map(id => loadFontJson(id))); | ||
| // 合并所有字体 | ||
| const _glyphs = fonts.reduce((acc, curr) => { | ||
| acc.push(...curr.glyphs); | ||
| return acc; | ||
| }, [] as FontJson['glyphs']); | ||
|
|
||
| glyphs = _glyphs; | ||
| icons = registerFontFamily(() => ({ | ||
| fontFamily, | ||
| glyphs: _glyphs.map(item => { | ||
| return { | ||
| ...item, | ||
| name: item.font_class, //统一为font class | ||
| }; | ||
| }), | ||
| })); | ||
| return icons; | ||
| } | ||
|
|
||
| // --- 注册 antd iconfont --- | ||
| const registeredIds = new Set<string>(); | ||
| const builtInIconFontId = 'font_3381398_29c1c449r6f'; | ||
| const getIconfontScriptUrl = (id: string) => `//at.alicdn.com/t/a/${id}.js`; | ||
|
|
||
| async function loadUnicodeFonts(ids: string[]) { | ||
| await Promise.all(ids.map(id => loadUnicodeFont(id))); | ||
| } | ||
|
|
||
| export async function registerIconFonts(ids: string[] = [builtInIconFontId]) { | ||
| const unregisteredIds = ids.filter(id => !registeredIds.has(id)); | ||
|
|
||
| if (!unregisteredIds.length) return icons; | ||
|
|
||
| // register | ||
| createFromIconfontCN({ | ||
| scriptUrl: unregisteredIds.map(getIconfontScriptUrl), | ||
| }); | ||
|
|
||
| const [ICONS] = await Promise.all([loadFontsJson(unregisteredIds), loadUnicodeFonts(unregisteredIds)]); | ||
| unregisteredIds.forEach(id => registeredIds.add(id)); | ||
| return ICONS; | ||
| } | ||
|
|
||
| export function getFontIcons() { | ||
| return icons; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.