{"_id":"@edwin-coder-arquitech/icons-vue","name":"@edwin-coder-arquitech/icons-vue","dist-tags":{"latest":"10.104.0"},"versions":{"10.104.0":{"name":"@edwin-coder-arquitech/icons-vue","description":"Vue components for icons in digital and software products using the Carbon Design System","version":"10.104.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/icons-vue"},"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 && node tasks/build.js","clean":"rimraf es lib","postinstall":"ibmtelemetry --config=telemetry.yml"},"dependencies":{"@edwin-coder-arquitech/icon-helpers":"^10.54.0","@ibm/telemetry-js":"^1.5.0"},"devDependencies":{"@edwin-coder-arquitech/cli-reporter":"^10.7.0","@edwin-coder-arquitech/icons":"^11.55.0","fs-extra":"^11.0.0","prettier":"^3.3.3","rimraf":"^6.0.0","rollup":"^2.79.1","vue":"^2.6.8"},"sideEffects":false,"_id":"@edwin-coder-arquitech/icons-vue@10.104.0","gitHead":"fd1b7ab668473833c250488e0f7fc4feb55f1d88","homepage":"https://github.com/carbon-design-system/carbon#readme","_nodeVersion":"22.12.0","_npmVersion":"11.0.0","dist":{"integrity":"sha512-59twE4Ana7SxnhbNSVQ8rDtIZsLMFBsp3cd8bwruq61hMVtDzSH/ZBm1BrkA7kAQ3RHTiPql8kJuzVN00BFlcw==","shasum":"d1923913274cccdceca1c3a88d30f7fc39c382df","tarball":"https://registry.npmjs.org/@edwin-coder-arquitech/icons-vue/-/icons-vue-10.104.0.tgz","fileCount":3,"unpackedSize":5118,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDgpcVcb4nuMrVLJwEav/wGapquRZruVKB8FVCkRm99dQIgfzVwrjWOiWMOT8CdaUXaJuOCDD62XonJtVShbH0/rHM="}]},"_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/icons-vue_10.104.0_1739621894308_0.06945608320008922"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-15T12:18:14.198Z","10.104.0":"2025-02-15T12:18:14.500Z","modified":"2025-02-15T12:18:14.777Z"},"maintainers":[{"name":"edwin-coder-arquitech","email":"edwin.pizarro@live.com"}],"description":"Vue components for icons in 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/icons-vue"},"bugs":{"url":"https://github.com/carbon-design-system/carbon/issues"},"license":"Apache-2.0","readme":"# @carbon/icons-vue\r\n\r\n> Vue components for icons in digital and software products using the Carbon\r\n> Design System\r\n\r\n## Getting started\r\n\r\nTo install `@carbon/icons-vue` 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/icons-vue\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/icons-vue\r\n```\r\n\r\n## Usage\r\n\r\nIcons in this package support the following sizes: `16`, `20`, `24`, and `32`\r\npixels. These sizes refer to the width and height of the icon.\r\n\r\nYou can install these components from `@carbon/icons-vue` through two ways. The\r\nfirst is to install them when you're initializing your Vue app. For example:\r\n\r\n```js\r\nimport { CarbonIconsVue } from '@carbon/icons-vue';\r\nimport Bee32 from '@carbon/icons-vue/es/bee/32';\r\nimport Vue from 'vue';\r\nimport App from './App.vue';\r\n\r\nVue.use(CarbonIconsVue, {\r\n  components: {\r\n    Bee32,\r\n  },\r\n});\r\n\r\nnew Vue({\r\n  render: (h) => h(App),\r\n}).$mount('#app');\r\n```\r\n\r\n_Note: if you would like to find the import path for an icon, you can reference\r\nour [icon preview](https://carbon-elements.netlify.app/icons/examples/preview/)_\r\n\r\nUsing `CarbonIconsVue` we can pass in any of the icon components that we'd like\r\nto use. In our application, we can then use them by doing:\r\n\r\n```vue\r\n<template>\r\n  <Bee32 />\r\n</template>\r\n```\r\n\r\nIf you would rather not register icons globally, you can also import them into\r\nindividual components.\r\n\r\n```js\r\nimport Bee32 from '@carbon/icons-vue/es/bee/32';\r\n\r\nexport default {\r\n  name: 'MyComponent',\r\n  component: {\r\n    Bee32,\r\n  },\r\n};\r\n```\r\n\r\nYou can pass in props to any icon component for things like accessibility\r\nlabels, custom classes, event handlers, and more. For example:\r\n\r\n```vue\r\n<template>\r\n  <Bee32 aria-label=\"Bee\" class=\"custom-class\" v-on:click=\"handler\" />\r\n</template>\r\n```\r\n\r\n## 📚 Examples\r\n\r\nIf you're looking for more examples on how to use `@carbon/icons-vue`, we have\r\nsome examples that you can check out:\r\n\r\n- [vue-cli](./examples/vue-cli)\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"}