@ 碳/缩写
使用碳设计系统的数字和软件产品的图标
开始
要安装 @carbon/icons 在您的工程中, 您需要运行以下
命令使用 无数字 :
npm install -S @carbon/icons
如果你喜欢 雅伦,使用以下命令 相反:
yarn add @carbon/icons
使用量
碳中的图标可直接从 @carbon/icons 用于香草
Java脚本. 本Repo中的第一当事方框架包可用于:
还为下列项目提供了其他生态系统包:
为了使用图标,也许应该提及我们 图标库 要找到您想要使用的特定图标,请参考页面.
香草
一旦你找到一个图标 并且你想用在 Vanilla JavaScript, 您可以通过在 JavaScript 文件中写入以下内容来导入图标 :
import IconName from '@carbon/icons/<module-type>/path-to-icon/size';
比如,如果我想导入16x16
add
图标,我会写:
import AddIcon from '@carbon/icons/es/add/16';
在这种情况下, es 用于ES2015模块(ESM),但也可以使用 lib
用于普通JS或 umd 用于UMD模块.
为了让屏幕看到这个 我们会利用我们的
icon-helpers 软件包。 这个软件包给我们两个选项
渲染我们的图标 : toString 财务报告和审定财务报表 toSVG。如果在模板中渲染,您可以
欲用前一义. 如果给DOM, toSVG 也许有帮助.
就我们而言,我们用 toSVG 在 DOM 为 16x16 创建节点 add
图标 :
import { getAttributes, toSVG } from '@carbon/icon-helpers';
import addIcon from '@carbon/icons/es/add/16';
const addIconNode = toSVG({
...addIcon,
attrs: getAttributes(addIcon.attrs),
});
铺设内道
库中的某些图标支持图标内部的替代填充,用于
实例
warning--filled
支持内置样式 ! 路径.
为了给内部路径作样式,您需要使用 CSS 瞄准 SVG 。 单位 常规,您可以通过写入以下内容来瞄准路径:
svg [data-icon-path='inner-path'] {
fill: blue;
opacity: 1;
}
在上面的代码片段中,我们的目标是内路径属性
[data-icon-path="inner-path"]值 fill 将是自定义颜色
您想要为内在的道路。 我们还需要设置 opacity 改为 1
以便让这个内部路径在页面上可见.
参考文献
你可以查看我们图标的完整参考文献 这里 这是 用于查找路径信息以导入图标.
捐款
我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 贡献指南!
许可证
凭 Apache 2.0 许可证。 。 。 .
IBM 遥测
本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .