@dxtmisha/媒体
@dxtmisha/media 是一个基础媒体资源,矢量图标库,以及用于现代网络开发的地理数据集库. 它是框架可知性,可树可摇动,可零依赖性,可用于任何TypeScript项目——无论是Vue,React,Nuxt还是平版浏览器代码.
为什么是图书馆?
每个网络应用程序最终都面临相同的经常性要求:处理文件上传和显示文件类型的图标,验证和格式化社交媒体简介和用户手柄,并制作本地化的国旗或电话号码输入口罩. 通常情况下,项目用零碎的SVG片段、临时的正则表达式、膨胀的图标字体以及复制的国别数据集来解决这些问题,这些数据集很快会过时并不必要地增加生产捆绑.
@dxtmisha/media 将所有这些解决办法集中在一个地方——深思熟虑、经过检验和准备使用。 重型SVG资产与核心元数据登记册完全脱钩,只允许您导入您需要的,并保持客户端捆绑最小化.
这有什么用?
对于 文件处理和分类 —— 说 MediaFile 统一多种输入( 本地浏览器) File 或者说 Blob 对象,数据 URL, Blob URL, 远程 URL, 文件系统路径, MIME 类型, 或扩展代码) 变成一个标准化的界面. 它解决了文件名,无扩展基名,规范扩展名,犬类MIME类型,跨出16个媒体分类的类别(image, (中文(简体) ), video, (中文(简体) ), document, (中文(简体) ), archive, (中文(简体) ), table)和22个内置布尔检查器(isImage(), (中文(简体) ), isDocument(), (中文(简体) ), isArchive()(见a/c.5/49/70,附件).
对于 文件目录和自定义图标 —— 说 MediaFiles 通过代码、扩展或MIME类型提供集中的搜索,并带有懒惰的内存 Map 用于即时O(1)检索的索引,同时 MediaFileIcon 提供原型-同位素内置录相机,以动态地将自定义的SVG图标与流畅的方法链接相覆盖或注入.
对于 社交媒体网络和处理 35+全球和区域网络(GitHub、Telegram、Instagram、X/Twitter、WeChat、Reddit、Zalo等)的综合元数据. MediaSocialNickname 格式化平台专用手柄(@dxtmisha, (中文(简体) ), u/dxtmisha, (中文(简体) ), MediaSocialUrl 构造具有重复前缀保护的 canonial profile 链接,以及 MediaSocialValue 在剥取查询参数,端口和危险协议时提取干净的用户名.
对于 国家旗帜和地理数据 - PascalCase250+矢量SVG国家旗帜(UsSvg, (中文(简体) ), VnSvg, (中文(简体) ), FrSvg以及结构化的ISO 3166-1国家数据集(例如)geo.json),涵盖国际电话代码,输入口罩,主时区,默认语言,首周首日,非计量单位覆盖.
对于 同位素安全和字符串公用事业 ——安全协议核查(isDangerousProtocol防止受SS攻击(javascript:, (中文(简体) ), data:, (中文(简体) ), vbscript:), URL前缀替换(replacePrefix),以及 保留案例的 URL 正常化(toLower) (中文(简体) ).
安装
npm install @dxtmisha/media
快速启动
import { MediaFile, MediaFiles, MediaSocial, InputSocialType, geo } from '@dxtmisha/media'
import { registerFileIcons } from '@dxtmisha/media/files'
import { registerSocialIcons } from '@dxtmisha/media/socials'
import { UsSvg, VnSvg } from '@dxtmisha/media/flags'
// Register standard SVG file & social icons
registerFileIcons()
registerSocialIcons()
// 1. File inspection & classification
const file = new MediaFile('https://example.com/assets/annual-report.2026.pdf?v=2#page=1')
file.name // 'annual-report.2026.pdf'
file.baseName // 'annual-report.2026'
file.extension // 'pdf'
file.mime // 'application/pdf'
file.isDocument() // true
file.isImage() // false
file.icon // '<svg ...'
// 2. Static catalog lookups
const pdfItem = MediaFiles.getByMime('application/pdf')
MediaFiles.isLink('https://example.com/doc.pdf') // true
// 3. Social media URLs and handles
MediaSocial.getUrl(InputSocialType.github, 'dxtmisha') // 'https://github.com/dxtmisha'
MediaSocial.getValue(InputSocialType.github, 'https://github.com/dxtmisha') // 'dxtmisha'
MediaSocial.getNickname(InputSocialType.telegram, 'dxtmisha') // '@dxtmisha'
MediaSocial.getNickname(InputSocialType.reddit, 'dxtmisha') // 'u/dxtmisha'
// 4. Country flags & geographical data
const us = geo.find(item => item.country === 'US')
us?.phoneCode // '1'
us?.phoneMask // '(...) ...-....'
UsSvg // '<svg ...'
VnSvg // '<svg ...'
子路径导出
为了最小化应用程序捆绑大小,将重型SVG资产隔离在专用子路径入口:
| 导入路径 | 目录 |
|---|---|
@dxtmisha/media | 核心类别MediaFile, (中文(简体) ), MediaFiles, (中文(简体) ), MediaFileIcon, (中文(简体) ), MediaSocial, (中文(简体) ), MediaSocialNickname, (中文(简体) ), MediaSocialUrl, (中文(简体) ), MediaSocialValue(b) 元数据登记册fileList, (中文(简体) ), socialList, (中文(简体) ), geo),工具函数,以及TypeScript类型而不捆绑 SVG字符串. |
@dxtmisha/media/files | 85个向量 SVG 文件图标(fileIcons和 registerFileIcons() 初始化帮助器. |
@dxtmisha/media/socials | 35个向量 SVG 社交媒体图标(socialIcons和 registerSocialIcons() 初始化帮助器. |
@dxtmisha/media/flags | PascalCase中的250+矢量SVG国家旗帜(UsSvg, (中文(简体) ), VnSvg, (中文(简体) ), FrSvg(见a/c.5/49/70,附件). |
原则
- 外部依赖性为零 ——独立SVG向量资产,打出类,和JSON数据集,第三方依赖度为零.
- 树摇动优化 ——核心元数据包含零SVG字符串;矢量资产通过专用子路径按需导入.
- 类型脚本第一 ——严格打字,明确接口,并自发地从框中取出零
any。 。 。 . - 清洁 API ——可预见方法连锁,单责任类,直观命名.
- Isomorphic & SSR 安全性 ——对于Node.js,Nitro,Nuxt,Next.js,以及客户端的运行时间,没有DOM泄露或窗口依赖.
- 测试覆盖率 ——每艘有综合单位试验的级,通用和边壳船(570+试验).
文档
完整的 API 参考、示例和指南 :
• https://dxtmisha.github.io/dxt-ui/?path=/docs/dxtmisha-en-media-about-the-library-docs