如何在 SolidJS 项目中集成 Tabler Iconstabler/icons-solidjs【免费下载链接】tabler-iconsA set of over 6100 free MIT-licensed high-quality SVG icons for you to use in your web projects.项目地址: https://gitcode.com/GitHub_Trending/ta/tabler-icons如果你已经有一个 SolidJS 应用想在页面里使用 Tabler Icons 的图标需要做的是安装tabler/icons-solidjs包把需要的图标当作组件导入使用并确认渲染出来的svg元素符合预期。本文基于仓库中的 SolidJS 使用文档、icons-solidjs 包 README 和包内测试文件整理出一条完整的操作路径。安装前的前提条件tabler/icons-solidjs是一个 npm 包用于在 SolidJS 应用中使用 Tabler Icons。根据 packages/icons-solidjs/package.json包声明的peerDependencies为solid-js: ^1.4.7即你的 SolidJS 项目需要安装满足该版本范围的solid-js包采用 ESM 构建type: module文档明确说明它由 ES modules 构建因此完全可 tree-shaking每个图标都可以作为组件导入。在开始之前确认你的项目已经初始化并能正常启动且solid-js版本满足上述 peer 依赖范围。安装 tabler/icons-solidjs在 SolidJS 项目根目录按你使用的包管理器执行其中一条安装命令三条命令均来自 packages/icons-solidjs/README.mdnpm install tabler/icons-solidjs或yarn add tabler/icons-solidjs或pnpm install tabler/icons-solidjs可选分支如果不希望通过包管理器安装文档也提供直接从 GitHub Releases 下载的方式SolidJS 文档 与包 README 均给出了该入口。仓库当前版本的tabler/icons-solidjs为3.46.0见 packages/icons-solidjs/package.json安装时可按需固定版本。安装完成后node_modules中会新增tabler/icons-solidjs包通过exports字段提供dist/esm、dist/cjs与类型声明文件无需额外配置。导入图标并作为组件使用Tabler Icons 的每个图标都以组件形式导出命名方式为Icon前缀加大驼峰图标名。文档给出的基础用法docs/icons/solidjs.mdximport { IconArrowRight } from tabler/icons-solidjs; const App () { return IconArrowRight /; }; export default App;在需要的组件中按需导入即可。由于包是可 tree-shaking 的 ESM只导入用到的图标打包器会移除未使用部分这也是文档明确提到的特性。包内测试文件 packages/icons-solidjs/test.spec.jsx 中还出现了IconAccessibleFilled这样的导入说明存在以Filled后缀命名的填充版本图标组件可以在同一包中以相同方式导入使用。通过 Props 调整图标外观图标组件接收额外 props 来调整外观。文档给出的 props 定义docs/icons/solidjs.mdxnametypedefaultsizeNumber24colorStringcurrentColorstrokeNumber2文档示例IconArrowRight colorred size{48} /验证渲染结果验证依据来自仓库自带的测试 packages/icons-solidjs/test.spec.jsx。它用solidjs/testing-library渲染图标组件并检查 DOM从中可以确认首次集成后的预期行为渲染IconArrowRight之类的图标组件后容器内应出现svg元素默认渲染时svg 元素带有width24、height24、strokecurrentColor、stroke-width2等属性class为tabler-icon加上图标名对应的类如tabler-icon-accessible以下为仓库测试文件中的文档示例仅作结果参照不是必须逐字一致的输出svg xmlnshttp://www.w3.org/2000/svg width24 height24 viewbox0 0 24 24 fillnone strokecurrentColor stroke-width2 stroke-linecapround stroke-linejoinround classtabler-icon tabler-icon-accessible ... /svg传入 props 后属性会随之更新测试中验证了这样的映射关系size{48}对应 svg 的width48color对应 svg 的stroke属性测试断言colorred后stroke为redstroke4对应 svg 的stroke-width4。换句话说在你的项目里验证时渲染图标后检查页面 DOM 即可出现了带tabler-icon类的svg元素且size/color/stroke三个 props 分别体现为width、stroke、stroke-width属性的变化即表示集成成功。如果你希望在tabler/icons-solidjs包目录内跑官方测试核对上述行为该包定义了test脚本vitest run见 packages/icons-solidjs/package.json可以按仓库既有的 pnpm workspace 方式在包目录执行pnpm run test。下一步图标组件渲染为普通svg元素后与页面中其他元素一样参与样式布局。需要更多图标时从tabler/icons-solidjs中按Icon前缀命名继续导入即可props 的完整定义见 docs/icons/solidjs.mdx安装与用法说明见 packages/icons-solidjs/README.md。【免费下载链接】tabler-iconsA set of over 6100 free MIT-licensed high-quality SVG icons for you to use in your web projects.项目地址: https://gitcode.com/GitHub_Trending/ta/tabler-icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/13 15:54:38 · 阅读 1.2k 如何在 SolidJS 项目中集成 Tabler Icons（@tabler/icons-solidjs）
如何在 SolidJS 项目中集成 Tabler Iconstabler/icons-solidjs【免费下载链接】tabler-iconsA set of over 6100 free MIT-licensed high-quality SVG icons for you to use in your web projects.项目地址: https://gitcode.com/GitHub_Trending/ta/tabler-icons如果你已经有一个 SolidJS 应用想在页面里使用 Tabler Icons 的图标需要做的是安装tabler/icons-solidjs包把需要的图标当作组件导入使用并确认渲染出来的svg元素符合预期。本文基于仓库中的 SolidJS 使用文档、icons-solidjs 包 README 和包内测试文件整理出一条完整的操作路径。安装前的前提条件tabler/icons-solidjs是一个 npm 包用于在 SolidJS 应用中使用 Tabler Icons。根据 packages/icons-solidjs/package.json包声明的peerDependencies为solid-js: ^1.4.7即你的 SolidJS 项目需要安装满足该版本范围的solid-js包采用 ESM 构建type: module文档明确说明它由 ES modules 构建因此完全可 tree-shaking每个图标都可以作为组件导入。在开始之前确认你的项目已经初始化并能正常启动且solid-js版本满足上述 peer 依赖范围。安装 tabler/icons-solidjs在 SolidJS 项目根目录按你使用的包管理器执行其中一条安装命令三条命令均来自 packages/icons-solidjs/README.mdnpm install tabler/icons-solidjs或yarn add tabler/icons-solidjs或pnpm install tabler/icons-solidjs可选分支如果不希望通过包管理器安装文档也提供直接从 GitHub Releases 下载的方式SolidJS 文档 与包 README 均给出了该入口。仓库当前版本的tabler/icons-solidjs为3.46.0见 packages/icons-solidjs/package.json安装时可按需固定版本。安装完成后node_modules中会新增tabler/icons-solidjs包通过exports字段提供dist/esm、dist/cjs与类型声明文件无需额外配置。导入图标并作为组件使用Tabler Icons 的每个图标都以组件形式导出命名方式为Icon前缀加大驼峰图标名。文档给出的基础用法docs/icons/solidjs.mdximport { IconArrowRight } from tabler/icons-solidjs; const App () { return IconArrowRight /; }; export default App;在需要的组件中按需导入即可。由于包是可 tree-shaking 的 ESM只导入用到的图标打包器会移除未使用部分这也是文档明确提到的特性。包内测试文件 packages/icons-solidjs/test.spec.jsx 中还出现了IconAccessibleFilled这样的导入说明存在以Filled后缀命名的填充版本图标组件可以在同一包中以相同方式导入使用。通过 Props 调整图标外观图标组件接收额外 props 来调整外观。文档给出的 props 定义docs/icons/solidjs.mdxnametypedefaultsizeNumber24colorStringcurrentColorstrokeNumber2文档示例IconArrowRight colorred size{48} /验证渲染结果验证依据来自仓库自带的测试 packages/icons-solidjs/test.spec.jsx。它用solidjs/testing-library渲染图标组件并检查 DOM从中可以确认首次集成后的预期行为渲染IconArrowRight之类的图标组件后容器内应出现svg元素默认渲染时svg 元素带有width24、height24、strokecurrentColor、stroke-width2等属性class为tabler-icon加上图标名对应的类如tabler-icon-accessible以下为仓库测试文件中的文档示例仅作结果参照不是必须逐字一致的输出svg xmlnshttp://www.w3.org/2000/svg width24 height24 viewbox0 0 24 24 fillnone strokecurrentColor stroke-width2 stroke-linecapround stroke-linejoinround classtabler-icon tabler-icon-accessible ... /svg传入 props 后属性会随之更新测试中验证了这样的映射关系size{48}对应 svg 的width48color对应 svg 的stroke属性测试断言colorred后stroke为redstroke4对应 svg 的stroke-width4。换句话说在你的项目里验证时渲染图标后检查页面 DOM 即可出现了带tabler-icon类的svg元素且size/color/stroke三个 props 分别体现为width、stroke、stroke-width属性的变化即表示集成成功。如果你希望在tabler/icons-solidjs包目录内跑官方测试核对上述行为该包定义了test脚本vitest run见 packages/icons-solidjs/package.json可以按仓库既有的 pnpm workspace 方式在包目录执行pnpm run test。下一步图标组件渲染为普通svg元素后与页面中其他元素一样参与样式布局。需要更多图标时从tabler/icons-solidjs中按Icon前缀命名继续导入即可props 的完整定义见 docs/icons/solidjs.mdx安装与用法说明见 packages/icons-solidjs/README.md。【免费下载链接】tabler-iconsA set of over 6100 free MIT-licensed high-quality SVG icons for you to use in your web projects.项目地址: https://gitcode.com/GitHub_Trending/ta/tabler-icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考