图标
图标代表概念,并在选项和行动上加入上下文.
这个 <auro-icon> 元素可以显示 Auro 图标库设置图标 category 财务报告和审定财务报表 name。 。 。 .
使用大小写
使用 <auro-icon> 当人们:
- 从添加附近文本上下文的图标中受益
- 需要快速识别其图标的动作或选项
- 在视觉提示上寻找绕过界面的路
安装
$ npm i @aurodesignsystem/auro-icon定义项目中的依赖性
导入每个项目中使用的组件 <auro-icon>。 。 。 .
import "@aurodesignsystem/auro-icon";使用 CDN 软件
如果你的项目不能处理JS资产,使用预先处理的资产. IE11等后遗症浏览器不支持.
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm"></script>基本实例
<auro-icon category="interface" name="pin-trip-filled">Your trip starts here</auro-icon>自定义版本管理组件注册
每个Auro组件有两个关键部分: 类 和自定义元素定义. 类定义了组件的行为,而自定义元素则以特定的名称注册,以便用于HTML.
安装安装部分中描述的组件, 导入此类, 并为您在全球注册该组件 .
然而,如果需要在同一页上加载多个版本的同构件(例如两个项目依赖于不同的版本),则在自定义元素名下手动注册该类以避免冲突.
要做到这一点,只需导入组件类并调用 register(name) 唯一名称的方法 :
// Import the class only
import { AuroIcon } from '@aurodesignsystem/auro-icon/class';
// Register with a custom name if desired
AuroIcon.register('custom-icon');这创造了一个 <custom-icon> 与 <auro-icon> 并且不会与同一页的内容相冲突.
你的旅行从这里开始
见代码
<custom-icon category="interface" name="pin-trip-filled">Your trip starts here</custom-icon>