Vue 3与Svelte用户福音：theSVG类型化组件接入实战指南

Vue 3与Svelte用户福音theSVG类型化组件接入实战指南【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvgtheSVG是一个开源的 SVG 品牌图标库收录了7,400 品牌 SVG 图标并提供了专为 Vue 3 和 Svelte 打造的类型化 SVG 组件包安装一个 npm 包就能像写Github width24 /一样把任意品牌 Logo 以完全类型安全的方式嵌入你的前端项目且支持按需引入、极致压缩打包体积。为什么品牌图标需要专门一个库大多数图标库UI 图标只解决按钮、箭头这类通用图形而品牌 Logo 散落在各家的 press kit、Figma 文件和零散的仓库里。theSVG 把这些品牌图标收敛到同一个来源核心卖点有四个特性说明️7,400 图标4,600 品牌 Logo、AWS/Azure/Google Cloud 架构图标、2FA 认证徽章等TypeScript 优先完整SVGAttributes类型拼错属性名编辑器直接报错✂️可 Tree-shake导入一个图标打包产物里就只有这一个图标框架无关React、Vue 3、Svelte、纯 HTML、CDN 全覆盖Vue 与 Svelte 各自的适配包packages/vue/、packages/svelte/均为零运行时依赖——框架本身只是 peer dependency组件由渲染函数生成不占用额外的运行时体积。Vue 3 项目三步接入 thesvg/vue前提Vue 3.3见 packages/vue/package.json 中的 peerDependencies。第 1 步安装npm install thesvg/vue第 2 步从桶文件按需导入Vite / Webpack 5 会自动 tree-shakescript setup import { Github, VisualStudioCode, Figma } from thesvg/vue; /script template Github width24 height24 / VisualStudioCode width24 height24 classtext-blue-500 / Figma width32 height32 aria-labelFigma / /template第 3 步可选逐图标导入体积最可控script setup import Github from thesvg/vue/github; /script每个图标都是独立模块即使你的打包器不支持 tree-shaking也只会打进你显式导入的图标。详细用法可参考 packages/vue/README.md。Svelte 项目三步接入 thesvg/svelte前提Svelte 4 或 Svelte 5 均可见 packages/svelte/package.json。script import { Github, Figma } from thesvg/svelte; // 或者逐图标导入体积最省 // import Github from thesvg/svelte/github; /script Github width24 height24 / Figma width32 height32 aria-labelFigma /组件内部通过$$restPropsSvelte 4或 spread propsSvelte 5透传所有 SVG 属性因此 Svelte 5 的 runics、事件绑定等特性都能无缝使用。完整文档在 packages/svelte/README.md。常用属性速查尺寸、配色与无障碍两个框架的组件都接受全部标准 SVG 属性最常用的几项属性类型用途示例width/heightnumber \| stringGithub width1em height1em /随字号缩放classstringGithub classw-6 h-6 /走 CSS 控制尺寸fillstring覆盖填充色默认none保留品牌原色aria-labelroleimg—有语义的图标标注给读屏器aria-hiddentrue—纯装饰图标从读屏器中隐藏三种尺寸控制姿势按需选择!-- 固定尺寸 -- Github width24 height24 / !-- CSS 响应式 -- Github classw-6 h-6 / !-- 跟随字体大小 -- Github width1em height1em /无障碍最佳实践图标承载含义时写aria-labelGitHub roleimg纯装饰时写aria-hiddentrue两种写法都是几行代码的事。组件命名规则与图标变体图标 slug 会转换成 PascalCase 组件名导入前可以先心算一下Slug组件名githubGithubvisual-studio-codeVisualStudioCode01dotaiI01Dotai数字开头自动加I前缀保证是合法标识符除了default品牌主色永远存在之外每个图标最多支持7 种变体覆盖不同的设计场景变体适用场景mono单色版继承文字颜色light/dark白色/黑色版适配深/浅色背景wordmark完整文字 Logo如横向 Logo 条以 GitHub 为例本地仓库中就保留了全部变体文件public/icons/github/ 下的default.svg、mono.svg、light.svg、wordmark.svg等可直观预览每种风格。找不到图标本地搜一搜theSVG 提供完全静态的 JSON 清单src/data/icons.json是收录所有图标元数据slug、别名、分类、色值的唯一事实来源配合 packages/icons/src/index.ts 的类型定义可以在本地按名称模糊检索而不必打开浏览器逐个翻页。如果想深度参与补图标、提 PR可以克隆仓库后按 CONTRIBUTING.md 的指引操作git clone https://gitcode.com/gh_mirrors/th/thesvg cd thesvg pnpm install pnpm dev常见问题速答Q1会引入很大的包体积吗不会。组件包声明了sideEffects: false桶导入会被 tree-shake不放心就逐图标导入打包器只会收录你 import 的那一个。Q2Vue 3.2 能装吗不能thesvg/vue要求 Vue 3.3Svelte 侧则 Svelte 4 / 5 都支持。Q3品牌 Logo 能商用吗代码与工具链为 MIT 协议但各品牌图标仍属其商标持有方商用前请遵守对应品牌的使用规范详见 TRADEMARK.md。Q4只想要静态文件不想装包怎么办每个图标在 public/icons/ 下都有现成 SVG可配合 CDN 的img用法直接在 HTML 中引用无需任何构建步骤。总结场景推荐做法Vue 3 Vite桶导入thesvg/vue享受自动 tree-shakingSvelte 4/5 SvelteKit桶导入thesvg/svelte配合$$restProps全属性透传极致体积控制逐图标导入如thesvg/vue/github深色背景切换light/wordmarkLight变体theSVG 的 Vue 与 Svelte 组件包让插入一个品牌 Logo这件事回归到一行模板代码同时用 TypeScript 类型把拼错、写错、漏属性挡在了编译期。一条npm install7,400 品牌图标即刻就绪 ✨【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考