我构建了 Material Symbols SVG，一个用于将 Material Symbols 用作 SVG 组件的图标库

Source: Dev.to

请提供您希望翻译的完整文本内容，我将为您翻译成简体中文并保留原始的格式、Markdown 语法以及技术术语。谢谢！

支持的框架

链接

• 文档 –
• 图标目录 –
• GitHub –

为什么我构建它

已经有一种“官方‑ish”的方式来使用 Material Symbols 的原始 SVG 文件（例如 @material-symbols/svg-400）。
在 React 中将这些图标作为组件使用时，我总是需要额外的转换层，例如 @svgr/webpack，或者编写自定义构建步骤。

这种工作流对一次性脚本来说还算可以，但对日常 UI 开发来说非常繁琐。
我想要的方式是：

• 无需额外的 SVG 转换步骤
• 无需为渲染图标而进行框架特定的 webpack 配置
• 直接导入且已经表现为组件
• 在不同框架之间保持一致的思维模型

于是我构建了一个库，从一开始就将 Material Symbols 作为框架组件提供。

图书馆提供的内容

• 3 800+ 图标
• 3 种样式变体 – 轮廓、圆角、锐角
• 7 种粗细变体 – 100 – 700
• 填充变体
• 框架包，具有相似的导入模式

因为这些图标以 SVG 组件（而非图标字体）的形式分发，它们自然适用于基于组件的 UI 代码。你可以使用标准的 SVG 属性来控制它们，例如 size、color、className/class、style，以及任何其他 SVG 属性。

React 示例

import { Home, Search } from "@material-symbols-svg/react";
import { Home as HomeRounded } from "@material-symbols-svg/react/rounded";
import { Home as HomeW500 } from "@material-symbols-svg/react/w500";

export function Example() {
  return (
    <>
      {/* Your JSX here */}
    </>
  );
}

默认导入是 outlined / w400。

import { Home } from "@material-symbols-svg/react";          // outlined / w400
import { Home as HomeW600 } from "@material-symbols-svg/react/w600";
import { Home as HomeRounded } from "@material-symbols-svg/react/rounded";
import { Home as HomeSharpW700 } from "@material-symbols-svg/react/sharp/w700";

相同的导入路径模式也适用于 Vue、Svelte、Astro 和 React Native。

设计选择：基于导入路径的变体

核心设计决策之一是 通过导入路径 而不是运行时属性来选择 样式和粗细。

为什么？

• Material Symbols 不是可以在运行时更改笔画宽度的简单线性图标。
• 每种 样式（outlined、rounded、sharp）和每种 粗细（w100 … w700）都有其 独立的 SVG 路径数据。

如果我们像下面这样暴露基于属性的 API：

组件将需要在单个模块中打包 21 种路径变体（3 种样式 × 7 种粗细）。这会影响 tree‑shaking 并增加 bundle 大小。

通过将变体拆分为不同的导入路径：

@material-symbols-svg/react/w600
@material-symbols-svg/react/rounded/w400
@material-symbols-svg/react/sharp/w700

打包工具能够看到清晰的模块图，从而轻松剔除未使用的变体。

深层导入 (icons/*)

您也可以直接从 icons 子文件夹导入特定图标：

import { HomeW400, HomeFillW600 } from "@material-symbols-svg/react/icons/home";
import { SettingsW400 } from "@material-symbols-svg/react/rounded/icons/settings";

优势

• 在导入路径中明确指定了具体图标。
• 填充变体易于定位。
• 在某些配置（例如 Astro 5）中，深层导入可以避免根导入可能导致的开发服务器超时。

组件属性与特性

所有组件接受标准的 SVG‑相关属性：

示例

import { Home } from "@material-symbols-svg/react";

export function Example() {
  return (
    <Home size={24} color="currentColor" />
  );
}

为可访问性添加 “

  Home

渲染为：

  
  Home

使用 Tailwind CSS 进行样式化

因为这些图标是普通组件，Tailwind 实用类可以直接使用：

import { Search } from "@material-symbols-svg/react";

export function SearchButton() {
  return (
    <button className="flex items-center gap-2">
      <Search className="w-5 h-5" />
      Search
    </button>
  );
}

Next.js 优化

对于 Next.js 项目，你可以通过 optimizePackageImports 改善开发时的表现：

// next.config.js
const nextConfig = {
  experimental: {
    optimizePackageImports: [
      "@material-symbols-svg/react",
      "@material-symbols-svg/react/rounded",
      "@material-symbols-svg/react/sharp",
    ],
  },
};

module.exports = nextConfig;

官方文档：

Next.js 已经对一些库进行了优化（例如 lucide-react、react-icons/*），但默认并未包含 @material-symbols-svg/react——因此建议使用上述配置。

摘要

• 3 800+ 图标，涵盖 3 种风格 和 7 种字重（另有填充版）。
• 零构建步骤转换 —— 直接导入即用的组件。
• 统一的 API，支持 React、Vue、Svelte、Astro 和 React Native。
• 可摇树（tree‑shakable） 的导入路径设计，确保最小的包体积。
• 完整的 SVG 属性支持，兼容 Tailwind，开箱即用的可访问性。

试试看，用干净的、组件优先的方式取代你的图标字体或 SVG 加载工作流！

Material Symbols SVG – 轻松浏览、检查和使用图标

在处理庞大的图标集合时，拥有专用的浏览工具会带来巨大的差异。我创建了一个网站，让您可以浏览 Material Symbols 系列并快速获取所需的资源。

网站提供的功能

• 按图标名称搜索
• 比较样式、填充、粗细、尺寸和颜色
• 查看特定框架的导入代码片段
• 直接复制 SVG

为什么它很重要

面对成千上万的图标可能会让人不知所措。此工具帮助您精准找到所需的图标——无论是常见的 UI 图标还是小众的（比如真空相关的符号！）。庞大的图标库意味着您会不断发现以前根本不知道存在的图标。我个人最喜欢的？猫头鹰图标。

目标

我希望 Material Symbols 能像一流的组件一样使用，而不是需要额外工具链步骤的原始 SVG 资源。

入门指南

• 文档与使用指南 –
• 完整图标目录 –
• GitHub 仓库 –

如果您试用了，期待听到您的反馈！