物质符号的反应

使用 b谷歌的物质符号 in React - 各种款式，重量和填充，完全可树摇，零运行时依赖。

生活例子: 九百三十- five.github.io / material-symbols-react

• 安装
• 使用
  • 进口
  • 权重
  • 道具
• 摇树&束大小
• 查找图标（用于代理和工具）
• ESM只
• 从v1迁移
• 它是如何工作的
• 许可证

安装

npm install @nine-thirty-five/material-symbols-react
# or: yarn add … / pnpm add …

需要React 18或19 (同行)的依赖。

使用

物质符号有三种 风格 （outlined， rounded， sharp), 7 权重 （100–700)，二 填满 （划线/填写）。每个组合都有自己的导入路径，所以 您的捆绑器只发送您使用的确切图标。

进口

// Default weight (400)
import { Search } from '@nine-thirty-five/material-symbols-react/outlined';
import { Home } from '@nine-thirty-five/material-symbols-react/outlined/filled';

// Specific weight
import { Star } from '@nine-thirty-five/material-symbols-react/rounded/300';
import { Favorite } from '@nine-thirty-five/material-symbols-react/rounded/700/filled';

// Sharp style
import { Delete } from '@nine-thirty-five/material-symbols-react/sharp/500';

function Toolbar() {
  return (
    <>
      <Search />
      <Star size={32} />
      <Favorite color="crimson" />
    </>
  );
}

权重

导入路径遵循该模式 …/{style}[/{weight}][/filled]：

风格: outlined， rounded， sharp． 重量: 100， 200， 300， 400， 500， 600， 700 (裸路径默认为 400）. 附加 /filled 对于填充的变体。

道具

每个图标接受所有SVG道具(SVGProps<SVGSVGElement>)，再加上方便 size 道具:

<Search size={32} />                 {/* sets width and height */}
<Search />                            {/* defaults to 1em — scales with font-size */}
<Search color="red" />                {/* icons use fill="currentColor" */}
<Search className="icon" />
<Search style={{ verticalAlign: 'middle' }} />
<Search onClick={…} aria-label="Search" />

• size - - - - - - number | string． 设置两个 width 和 height． 默认为 "1em"，所以图标 与周围环境成比例 font-size。通过 width/height 显式地覆盖。
• 颜色 -图标渲染 fill="currentColor"所以他们继承了 color 从CSS。
• title -可访问的标签，呈现为SVG <title> 与 role="img".

可访问性

图标 默认是装饰性的：他们用 aria-hidden="true" 屏幕阅读器跳过 他们。为了使一个图标有意义，给它一个标签- via title， aria-label，或者 aria-labelledby -然后切换到 role="img" 以标签作为其可访问的名称：

<Delete />                    {/* decorative: aria-hidden="true" */}
<Delete title="Delete item" /> {/* semantic: role="img" + <title> */}
<Delete aria-label="Delete item" />

摇树&束大小

每个图标是一个单行模块(base("<path>"))在单个共享组件上，标记为 /*#__PURE__*/ 在一个 "sideEffects": false 包中。只在一个重量下导入一个图标 这条路径，不是集合的其他部分，也不是其他权重。适用于Vite， Next.js, webpack， esbuild、Parcel和Rollup。

查找图标（用于代理和工具）

每个安装都附带一个可搜索的目录 …/manifest.json （node_modules/@nine-thirty-five/material-symbols-react/dist/manifest.json）. 每一个 条目有图标 name，是出口的。 component， categories，而且富有 tags （同义词）-因此工具或编码代理可以将自然语言请求解析为 组件 离线，没有API调用；

{
  "importPattern": "import { <component> } from '@nine-thirty-five/material-symbols-react/<style>[/<weight>][/filled]'",
  "styles": ["outlined", "rounded", "sharp"],
  "weights": [100, 200, 300, 400, 500, 600, 700],
  "defaultWeight": 400,
  "icons": [
    {
      "name": "add",
      "component": "Add",
      "categories": ["…"],
      "tags": ["add", "create", "new", "plus", "+"],
    },
  ],
}

例如，满足 “给按钮添加一个创建图标”:匹配 create 反对 tags,选 Add，并导入：

import { Add } from '@nine-thirty-five/material-symbols-react/outlined';

<button>
  <Add /> Create
</button>;

目录也是可以直接导入的：

import manifest from '@nine-thirty-five/material-symbols-react/manifest.json' with { type: 'json' };

从命令行搜索

该包在同一个目录上附带了一个小的无依赖的CLI：

npx @nine-thirty-five/material-symbols-react find trash

Delete            delete  [UI actions]
DeleteForever     delete_forever  [UI actions]
…

import { Delete } from '@nine-thirty-five/material-symbols-react/outlined';

选项: --limit/-n <N> (默认10), --json 用于机器可读输出。

ESM只

这个包裹运送 仅限ES模块． 它适用于所有现代的捆绑器和ESM Node。在 节点≥22，CommonJS代码即可 require() 这直接归功于 require(esm);在旧节点上或 下 node16/nodenext 从CJS中解析TypeScript，使用动态 import().

从v1迁移

V2增加了重量轴和一些符合人体工程学的变化：

• 现有的进口产品仍在运行。 …/outlined 和 …/outlined/filled 仍然决心减肥 400，和以前一样。
• 默认大小从 24 来 1em. 图标现在可以缩放 font-size． 修复旧的 固定尺寸，pass size={24} (或一组 width/height）。
• 新 size 道具 和新的权重入口点(/100–/700）。
• 纠正了14个图标名称 (一个v1 bug掉了一个裸 0),如。 SpeedFivex → SpeedZeroFivex.
• ESM-only (v1也是有效的ESM；破碎的CJS main 字段已被删除)。

自动升级（codemod）

运行捆绑的 codemod 为您应用大小和重命名更改：

npx jscodeshift -t node_modules/@nine-thirty-five/material-symbols-react/codemods/v1-to-v2.cjs \
  --parser tsx src/

它增加了 size={24} 对依赖旧默认值的图标进行修改，并将其重命名为14个 组件。通过 --size=skip 接受新事物 1em 违约。

它是如何工作的

图标是从谷歌的官方工件生成的-图标列表来自 材料符号元数据API 和svg fonts.gstatic.com CDN。生成器提取每条路径，用SVGO对其进行优化，并发出 dist 直接树。没有网页抓取，没有无头浏览器。看到 CONTRIBUTING.md.

许可证

材料设计图标是由 谷歌.

我们提供了这些图标，以便您在Apache下将其合并到您的产品中 许可证版本2.0。请随意在您的 产品。我们希望在应用的about屏幕中出现归属，但这不是必需的。