{"_id":"@edwin-coder-arquitech/icon-helpers","name":"@edwin-coder-arquitech/icon-helpers","dist-tags":{"latest":"10.54.0"},"versions":{"10.54.0":{"name":"@edwin-coder-arquitech/icon-helpers","description":"Helpers used alongside icons for digital and software products using the Carbon Design System","version":"10.54.0","license":"Apache-2.0","main":"lib/index.js","module":"es/index.js","repository":{"type":"git","url":"git+https://github.com/carbon-design-system/carbon.git","directory":"packages/icon-helpers"},"bugs":{"url":"https://github.com/carbon-design-system/carbon/issues"},"keywords":["ibm","elements","carbon","carbon-elements","carbon-design-system","components","react"],"publishConfig":{"access":"public","provenance":true},"scripts":{"build":"yarn clean && carbon-cli bundle src/index.ts --name CarbonIconHelpers","clean":"rimraf es lib umd","postinstall":"ibmtelemetry --config=telemetry.yml"},"devDependencies":{"@edwin-coder-arquitech/cli":"^11.23.0","rimraf":"^6.0.0","typescript-config-carbon":"^0.3.0"},"sideEffects":false,"dependencies":{"@ibm/telemetry-js":"^1.5.0"},"_id":"@edwin-coder-arquitech/icon-helpers@10.54.0","gitHead":"fd1b7ab668473833c250488e0f7fc4feb55f1d88","homepage":"https://github.com/carbon-design-system/carbon#readme","_nodeVersion":"22.12.0","_npmVersion":"11.0.0","dist":{"integrity":"sha512-NwX9jIRoEB1kgvCLfsfxbYkOKm3XSdLxWBgt7dqvcFuyiMv9HBKb0tSX19hHwg8LTio/1Gq/VsEzUxnU12GgIA==","shasum":"2636fecf3adcaf3e17ce33e489c01729f6ea3f7e","tarball":"https://registry.npmjs.org/@edwin-coder-arquitech/icon-helpers/-/icon-helpers-10.54.0.tgz","fileCount":3,"unpackedSize":6056,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC8rY/V7GrWpCtW4PF7GgEj9Jn/urxQuM1go4nofUC1XAiALXye1Vj7WQxyeHo7CDpM8M+M0hiYxWl+iw1YYEl2YGg=="}]},"_npmUser":{"name":"edwin-coder-arquitech","email":"edwin.pizarro@live.com"},"directories":{},"maintainers":[{"name":"edwin-coder-arquitech","email":"edwin.pizarro@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/icon-helpers_10.54.0_1739621885532_0.6687439721844373"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-15T12:18:05.461Z","10.54.0":"2025-02-15T12:18:05.690Z","modified":"2025-02-15T12:18:05.997Z"},"maintainers":[{"name":"edwin-coder-arquitech","email":"edwin.pizarro@live.com"}],"description":"Helpers used alongside icons for digital and software products using the Carbon Design System","homepage":"https://github.com/carbon-design-system/carbon#readme","keywords":["ibm","elements","carbon","carbon-elements","carbon-design-system","components","react"],"repository":{"type":"git","url":"git+https://github.com/carbon-design-system/carbon.git","directory":"packages/icon-helpers"},"bugs":{"url":"https://github.com/carbon-design-system/carbon/issues"},"license":"Apache-2.0","readme":"# @carbon/icon-helpers\r\n\r\n> Helpers used alongside icons for digital and software products using the\r\n> Carbon Design System\r\n\r\n## Getting started\r\n\r\nTo install `@carbon/icon-helpers` in your project, you will need to run the\r\nfollowing command using [npm](https://www.npmjs.com/):\r\n\r\n```bash\r\nnpm install -S @carbon/icon-helpers\r\n```\r\n\r\nIf you prefer [Yarn](https://yarnpkg.com/en/), use the following command\r\ninstead:\r\n\r\n```bash\r\nyarn add @carbon/icon-helpers\r\n```\r\n\r\n## Usage\r\n\r\n`@carbon/icon-helpers` provides a couple of helpers for rendering `<svg>` nodes\r\nin a document, or to help get the correct attributes to set on an `<svg>` node.\r\nThese include:\r\n\r\n| Name               | Type                              | Description                                                                  |\r\n| ------------------ | --------------------------------- | ---------------------------------------------------------------------------- |\r\n| `getAttributes`    | `(attributes: Object) => Object`  | Get the attributes for an `<svg>` node                                       |\r\n| `formatAttributes` | `(attributes: Object) => String`  | Format the attributes into a string that can be applied to a node in the DOM |\r\n| `toString`         | `(descriptor: Object) => String`  | Format the given icon descriptor into a string. Useful for templates         |\r\n| `toSVG`            | `(descriptor: Object) => DOMNode` | Format the given icon descriptor into a DOM node                             |\r\n\r\nFor most of the methods, `attributes` corresponds with whatever the name and\r\nvalue would be if you were writing the HTML for the `<svg>`. For example, if we\r\nwanted to set `width` and `height` we would do the following:\r\n\r\n```js\r\nconst { getAttributes } = require('@carbon/icon-helpers');\r\nconst attributes = getAttributes({ width: 20, height: 20 });\r\n```\r\n\r\nIn order for the icon to be considered focusable, you will need to provide\r\neither `aria-label`, `aria-labelledby`, or `title` in the given `attributes` in\r\naddition to `tabindex`. For example:\r\n\r\n```js\r\nconst { getAttributes } = require('@carbon/icon-helpers');\r\nconst attributes = getAttributes({\r\n  'aria-label': 'My icon label',\r\n  tabindex: '0',\r\n});\r\n```\r\n\r\n### Icon descriptors\r\n\r\nAn icon descriptor is the term we use to describe icon objects exported by\r\n`@carbon/icons`. By default, they will have the following shape:\r\n\r\n```js\r\n{\r\n  elem: 'svg',\r\n  attrs: {\r\n    xmlns: 'http://www.w3.org/2000/svg',\r\n    viewBox: '0 0 16 16',\r\n    width: 16,\r\n    height: 16,\r\n  },\r\n  content: [\r\n    {\r\n      elem: 'path',\r\n      attrs: {\r\n        d: '...',\r\n      },\r\n    },\r\n  ],\r\n  name: 'IconName',\r\n  size: 16,\r\n}\r\n```\r\n\r\nYou can import these definitions directly from `@carbon/icons` and use them\r\nalongside `toSVG` or `toString` by doing:\r\n\r\n```js\r\nimport { IconName } from '@carbon/icons';\r\nimport { toString, toSVG } from '@carbon/icon-helpers';\r\n\r\nconst iconString = toString(IconName);\r\nconst iconSVG = toSVG({\r\n  ...IconName,\r\n  attrs: {\r\n    ...IconName.attrs,\r\n    myCustomAttribute: 'myCustomAttributeValue',\r\n  },\r\n});\r\n```\r\n\r\n## 🙌 Contributing\r\n\r\nWe're always looking for contributors to help us fix bugs, build new features,\r\nor help us improve the project documentation. If you're interested, definitely\r\ncheck out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀\r\n\r\n## 📝 License\r\n\r\nLicensed under the [Apache 2.0 License](/LICENSE).\r\n\r\n## <picture><source height=\"20\" width=\"20\" media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg\"><source height=\"20\" width=\"20\" media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\"><img height=\"20\" width=\"20\" alt=\"IBM Telemetry\" src=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\"></picture> IBM Telemetry\r\n\r\nThis package uses IBM Telemetry to collect de-identified and anonymized metrics\r\ndata. By installing this package as a dependency you are agreeing to telemetry\r\ncollection. To opt out, see\r\n[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).\r\nFor more information on the data being collected, please see the\r\n[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).\r\n","readmeFilename":"README.md"}