ECL 图标组件

npm 软件包 : @ecl/icon

npm install --save @ecl/icon

参数

• 漫画 (关联数组) (默认: ):
  • "姓名"(字符串)(默认:"") 图标名,如"相册","twitter"
  • "大小" (字符串)(默认:"m") 图标大小;可以是"x","s","m","l","xl","2xl","fluid"
  • "转换" (字符串)(默认:")图标转换;可以是"旋转-0","旋转-90","旋转-180","旋转-270","平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面
  • “ 颜色”( 字符串)( 默认 : “ ” ) 图标颜色; 可以是“ 默认 ” 、 “ 倒置 ” 、 “ 主要 ”
  • "title" (字符串)(默认为:") 图标的可访问标题(快捷为额外可访问性). 标题)
  • "Family"(字符串)(默认:"") Icon家族(如"phosphor")
  • "tyle" (字符串)(默认为:") 图标样式; 大多用于社交网络图标; 可以是"prime","monochrome","inverted"
• 图像 (boolean) (默认:虚假) 图标是否应当被视为无障碍图像
• “ 外部可访问性 ” (对象) (默认: ) 用作图像的可访问标记 :
  • “描述” (字符串)(默认:`') <desc> 标签
  • "描述 id"(字符串)(默认:") 给 <desc> 标签
  • “标题”(字符串)(默认:`') <title> 标签
  • "title id"(字符串)(默认:") 给 <title> 标签
  • "作用" (字符串)(默认:") 角色属性值
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/icon/icon.html.twig' with { 
  icon: { 
    name: 'arrow-down', 
    family: 'phosphor',
    size: 'm', 
    transform: 'rotate-90', 
    color: 'primary' 
  }, 
  extra_classes: 'my-extra-class-1 my-extra-class-2', 
  extra_attributes: [ 
    { name: 'data-test', value: 'data-test-value' }, 
    { name: 'data-test-1', value: 'data-test-value-1' } 
  ] 
} %}