@ecl/twig-component-icon

ECL Icon

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@ecl/twig-component-icon
7653.4.216 days agoa year agoMinified + gzip package size for @ecl/twig-component-icon in KB

Readme

ECL Icon component
npm package: @ecl/twig-component-icon
npm install --save @ecl/twig-component-icon

Parameters

  • "icon" (associative array) (default: 'predefined structure below')
- "path" (string) (default: '') - path/url to general icon file (eg. /path-to-icon/icon.svg) - "name" (string) (default: '') - name of icon, eg. 'facebook', 'twitter'. - "size" (string) (default: 'm') size of icon. Available sizes are 'xs','s','m','l','xl','2xl','fluid' - "transform" (string) (default: '') Transformation of icon. Available transformations are 'rotate-0', 'rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical') - "color" (string) (default: '') Color of icon. Available colors are 'default', 'inverted', 'primary'
  • "asimage": (boolean) (default: false) Whether the icon is used as an image
  • "extraaccessibility" (optional) (object) Extra tags for accessibility when used as an image
- description: '' (desc tag) - descriptionid: '' (desc tag id) - title: '' (title tag) - titleid: '' (title tag id)
  • "extraclasses" (optional) (string) (default: '') Extra classes (space separated)
  • "extraattributes" (optional) (array) (default: ) Extra attributes
- "name" (string) Attribute name, eg. 'data-test' - "value" (string) Attribute value, eg: 'data-test-1'

Example:

{% include '@ecl/icon/icon.html.twig' with { 
  icon: { 
    path: '/static/media/icons.svg', 
    name: 'facebook', 
    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' } 
  ] 
} %}