阿姆斯特丹设计系统:反应图标
此软件包提供了来自 阿姆斯特丹设计系统 作为反应组件. 用它来使用您 React 项目中的正确图标 .
安装
如果您想要或需要直接在反应项目中使用图标, 则自行安装此软件包 .
注意我们 反应组件 包含一个 图标组件 这为使用图标提供了方便的API,并简化了与文本的对齐.
npm install @amsterdam/design-system-react-icons
使用量
导入您需要的图标组件以及通用图标组件,并在您的 JSX 中使用 .
import { Icon } from "@amsterdam/design-system-react"
import { SearchIcon } from "@amsterdam/design-system-react-icons"
export const App = () => <Icon svg={SearchIcon} />
从右到左的镜像
一些图标(箭头、车辆、语音气球等)带有 data-directional="true" 其根上的属性 <svg> 元素,并意在从右到左(RTL)上下文横向反射.
當您用相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相 Icon 组件,此镜像由 @amsterdam/design-system-css是因为 .ams-icon 样式.
如果您直接渲染图标组件, 而不将其包入 Icon你对照镜子负责.
添加一条按照这些线条的规则,范围为您创建图标的任何地方:
.your-icon-wrapper:dir(rtl) svg[data-directional="true"] {
transform: scaleX(-1);
}
应用 :dir(rtl) 对包装,而不是 <svg> 自己来.
方向性确定由每个文档语言定义, SVG 有自己的规则与 HTML 不同—— 应用 :dir() 直接对一个 <svg> 元素依赖于浏览器处理不一致的未指定跨名称空间继承行为.
见 图标贡献指南 图标带有属性和原因.
更新
当更新到此软件包的新发布时, 请检查 更改日志 因为打破了变化. 如果有的话,请相应更新申请.
支助
如果你有问题,找到问题,或者想做贡献,请联系我们. 想办法联系我们 设计系统.amsterdam。 。 。 .