{"_id":"@cicada-ag/meteor-icon-kit","name":"@cicada-ag/meteor-icon-kit","dist-tags":{"latest":"5.4.0"},"versions":{"5.4.0":{"name":"@cicada-ag/meteor-icon-kit","version":"5.4.0","description":"An icon library and toolkit that follows a minimal, yet highly expressive style perfectly aligned with Shopware's product language","keywords":["svg","shopware","icons"],"homepage":"https://github.com/shopware/meteor/tree/main/packages/icon-kit#readme","bugs":{"url":"https://github.com/shopware/meteor/issues"},"repository":{"type":"git","url":"git+ssh://git@github.com/getcicada/meteor.git"},"license":"MIT","author":{"name":"shopware AG"},"main":"index.js","dependencies":{"dotenv":"^16.4.1","js-md5":"^0.7.3"},"devDependencies":{"@supercharge/promise-pool":"^2.4.0","@types/axios":"^0.14.0","@types/cli-progress":"^3.9.2","@types/fs-extra":"^9.0.13","@types/js-md5":"^0.4.3","@types/node":"^18.11.15","@types/svgo":"^2.6.3","@typescript-eslint/eslint-plugin":"^5.17.0","@typescript-eslint/parser":"^5.17.0","axios":"^0.26.1","chalk":"^4.1.2","cli-progress":"^3.10.0","eslint":"^8.12.0","eslint-plugin-import":"^2.25.4","fs-extra":"^10.0.1","svgo":"^2.8.0","svgo-autocrop":"1.1.1","ts-node":"^10.8.1","typescript":"^4.6.3"},"scripts":{"build":"tsc","debug":"ts-node src/debug.ts","docs:copy":"../developer-portal/docs-cli link --src docs --dst resources/meteor-icon-kit","docs:link":"../developer-portal/docs-cli link --src docs --dst resources/meteor-icon-kit --symlink","docs:preview":"../developer-portal/docs-cli preview","lint:all":"npm run lint:types && npm run lint:eslint","lint:eslint":"eslint ./src --ext .ts","lint:types":"tsc --noEmit","prepublish":"npm run build","start":"node dist","start:dev":"ts-node src"},"_id":"@cicada-ag/meteor-icon-kit@5.4.0","_integrity":"sha512-XxvN65o6nHcxwSYoygRZQRoEV/XcUsIcQ736s66ZcI5Q27UNTRcJ2/Vuuajs2bplJEfIBr3UE2uT2m6BrEv89A==","_resolved":"/tmp/0cd740a1f0aade6d3c4c5c69d956eb8d/cicada-ag-meteor-icon-kit-5.4.0.tgz","_from":"file:cicada-ag-meteor-icon-kit-5.4.0.tgz","_nodeVersion":"20.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-XxvN65o6nHcxwSYoygRZQRoEV/XcUsIcQ736s66ZcI5Q27UNTRcJ2/Vuuajs2bplJEfIBr3UE2uT2m6BrEv89A==","shasum":"a413f9454f0551e5bce6fb315ae05e87dc00f3cd","tarball":"https://registry.npmjs.org/@cicada-ag/meteor-icon-kit/-/meteor-icon-kit-5.4.0.tgz","fileCount":862,"unpackedSize":1008869,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTjAbMSRWyQ3HIf4R8lZMiW0kywGrF6Re9bFGx4lgAmAiBrQNQCv9zWFV7GVVXd9wbwNjXOfcPQcf81JK7mMGR1/g=="}]},"_npmUser":{"name":"xiaosong66","email":"1596363735@qq.com"},"directories":{},"maintainers":[{"name":"xiaosong66","email":"1596363735@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/meteor-icon-kit_5.4.0_1734001746482_0.28345069885154883"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-12T11:09:06.394Z","5.4.0":"2024-12-12T11:09:06.801Z","modified":"2024-12-12T11:09:07.068Z"},"maintainers":[{"name":"xiaosong66","email":"1596363735@qq.com"}],"description":"An icon library and toolkit that follows a minimal, yet highly expressive style perfectly aligned with Shopware's product language","homepage":"https://github.com/shopware/meteor/tree/main/packages/icon-kit#readme","keywords":["svg","shopware","icons"],"repository":{"type":"git","url":"git+ssh://git@github.com/getcicada/meteor.git"},"author":{"name":"shopware AG"},"bugs":{"url":"https://github.com/shopware/meteor/issues"},"license":"MIT","readme":"[![npm version](https://badge.fury.io/js/@cicada-ag%2Fmeteor-icon-kit.svg)](https://badge.fury.io/js/@cicada-ag%2Fmeteor-icon-kit)\n\n# meteor-icon-kit\n\n> An icon library and toolkit that follows a minimal, yet highly expressive style perfectly aligned with Shopware's product language\n\n## Prerequisites\n\nThis project requires `npm` or `yarn`.\n[npm](http://npmjs.org/) and [yarn](https://yarnpkg.com/) are really easy to install.\nTo make sure you have one of them available on your machine,\ntry running the following command. This project itself was created with `npm`.\n\n```sh\n$ npm -v\n8.1.0\n\n$ yarn -v\n1.22.15\n```\n\n## Table of contents\n\n- [meteor-icon-kit](#meteor-icon-kit)\n  - [Prerequisites](#prerequisites)\n  - [Table of contents](#table-of-contents)\n  - [Installation](#installation)\n  - [Usage](#usage)\n  - [Vite example](#example)\n  - [Built With](#built-with)\n  - [Figma library](#figma-library)\n  - [License](#license)\n\n## Installation\n\n**BEFORE YOU INSTALL:** please read the [prerequisites](#prerequisites)\n\nTo install the meteor-icon-kit, run:\n\n```sh\n$ npm install @cicada-ag/meteor-icon-kit\n```\n\nOr if you prefer using Yarn:\n\n```sh\n$ yarn add @cicada-ag/meteor-icon-kit\n```\n\n## Usage\n\nStart by importing/using the provided styling.\nEither utilizing sass/scss:\n```scss\n@import '@cicada-ag/meteor-icon-kit/icons/meteor-icon-kit.scss';\n```\n\nOr classic via the css file:\n\n```html\n<link rel=\"stylesheet\" href=\"your-asset-folder/meteor-icon-kit-8e350007463127dbe9f66c60cd6896ca.css\">\n```\n\nThen, you can use the icons:\n```js\nimport wallet from '@cicada-ag/meteor-icon-kit/icons/regular/wallet.svg';\n```\n\n### Dynamic colors\n\nTake this pseudo html:\n```html\n<span class=\"icon-example\">\n    <wallet />\n</span>\n```\n\nBy defining the following class structure in `CSS` you can change the color of the svg dynamically:\n```CSS\n.icon-example {\n  display: block;\n  color: green;\n  \n  svg {\n    fill: currentColor;\n\n    path,\n    use {\n      fill: currentColor;\n    }\n  }\n}\n```\n\n## Example\n\nFollowing is an example for a Vue3 project using Vite as a bundler.\nWe are using the `vite-svg-loader` to load the svg files.\n\nIn your `vite.config.js` add the following:\n```js\n//...\nimport svgLoader from 'vite-svg-loader';\n\nexport default {\n  plugins: [\n    //...\n    svgLoader()\n  ],\n};\n\n```\n\nThis way you can import your svg files as components:\n```vue\n<template>\n  <ActivityIcon />\n</template>\n\n<script setup>\nimport ActivityIcon from '@cicada-ag/meteor-icon-kit/icons/regular/activity.svg';\n</script>\n```\n\nYou can find this example as a CodeSandbox template [here](https://codesandbox.io/p/sandbox/meteor-icon-kit-example-revdlr).\n\n## Built With\n\n* Typescript\n* Figma API\n* VS-Code\n* Love :blue_heart: :blue_heart: :blue_heart:\n\n## Figma library\nMeteor Icon Kit is available as a [Figma library](https://www.figma.com/community/file/1032564947404478461/Meteor-Icon-Kit-%E2%80%93-Shopware) through the Figma Community. To use the icons, log in to your Figma account and duplicate the file to your drafts.\n\n## License\n\nSee the [LICENSE](LICENSE.md) file for license rights and limitations (MIT). \n\n2024 © shopware AG\n","readmeFilename":"README.md"}