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/thesvg

theSVG是一个开源的 SVG 品牌图标库，收录了7,400+ 品牌 SVG 图标，并提供了专为 Vue 3 和 Svelte 打造的类型化 SVG 组件包：安装一个 npm 包，就能像写<Github width="24" />一样，把任意品牌 Logo 以完全类型安全的方式嵌入你的前端项目，且支持按需引入、极致压缩打包体积。

为什么品牌图标需要专门一个库

大多数图标库（UI 图标）只解决"按钮、箭头"这类通用图形，而品牌 Logo 散落在各家的 press kit、Figma 文件和零散的仓库里。theSVG 把这些品牌图标收敛到同一个来源，核心卖点有四个：

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-shake）

<script setup> import { Github, VisualStudioCode, Figma } from "@thesvg/vue"; </script> <template> <Github width="24" height="24" /> <VisualStudioCode width="24" height="24" class="text-blue-500" /> <Figma width="32" height="32" aria-label="Figma" /> </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 width="24" height="24" /> <Figma width="32" height="32" aria-label="Figma" />

组件内部通过$$restProps（Svelte 4）或 spread props（Svelte 5）透传所有 SVG 属性，因此 Svelte 5 的 runics、事件绑定等特性都能无缝使用。完整文档在 packages/svelte/README.md。

常用属性速查：尺寸、配色与无障碍

两个框架的组件都接受全部标准 SVG 属性，最常用的几项：

三种尺寸控制姿势，按需选择：

<!-- 固定尺寸 --> <Github width="24" height="24" /> <!-- CSS 响应式 --> <Github class="w-6 h-6" /> <!-- 跟随字体大小 --> <Github width="1em" height="1em" />

💡无障碍最佳实践：图标承载含义时写aria-label="GitHub" role="img"；纯装饰时写aria-hidden="true"，两种写法都是几行代码的事。

组件命名规则与图标变体

图标 slug 会转换成 PascalCase 组件名，导入前可以先心算一下：

除了default（品牌主色，永远存在）之外，每个图标最多支持7 种变体，覆盖不同的设计场景：

以 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 的那一个。

Q2：Vue 3.2 能装吗？不能，@thesvg/vue要求 Vue 3.3+；Svelte 侧则 Svelte 4 / 5 都支持。

Q3：品牌 Logo 能商用吗？代码与工具链为 MIT 协议，但各品牌图标仍属其商标持有方，商用前请遵守对应品牌的使用规范（详见 TRADEMARK.md）。

Q4：只想要静态文件不想装包怎么办？每个图标在 public/icons/ 下都有现成 SVG，可配合 CDN 的<img>用法直接在 HTML 中引用，无需任何构建步骤。

总结

theSVG 的 Vue 与 Svelte 组件包让"插入一个品牌 Logo"这件事回归到一行模板代码，同时用 TypeScript 类型把"拼错、写错、漏属性"挡在了编译期。一条npm install，7,400+ 品牌图标即刻就绪 ✨

【免费下载链接】thesvg7,400+ brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg