{"_id":"@brnbio/vue-material-design-icons","_rev":"3-8087779939cc0cf91683fa218dc156fe","name":"@brnbio/vue-material-design-icons","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@brnbio/vue-material-design-icons","version":"1.0.0","keywords":["vue","vue3","material design icons","mdi","icons","material","icon","svg","vue.js","material design","typescript"],"license":"MIT","_id":"@brnbio/vue-material-design-icons@1.0.0","maintainers":[{"name":"brnbio","email":"heider669@gmail.com"}],"homepage":"https://github.com/robcresswell/vue-material-design-icons","bugs":{"url":"https://github.com/robcresswell/vue-material-design-icons/issues"},"dist":{"shasum":"7db7cf9207d9aaab6aaf98e2ecd0e668df5d143c","tarball":"https://registry.npmjs.org/@brnbio/vue-material-design-icons/-/vue-material-design-icons-1.0.0.tgz","fileCount":14903,"integrity":"sha512-mg6V/bbSR9T++gM/cGbGmN1dQWNnR4xQ4fGCXpU+AuR7c3IjeLWOKnNRxvL7oTfh1lf3Ykmt36q7cJAKIBk5Og==","signatures":[{"sig":"MEQCICMLB0kdOpW3MUy1C8zHrvCpL12G4j2E4iHkKonW0d7nAiBkqNqvIuUXmFLhcqv3r8kWpGJQUTfgFCn4ixy50HYWrw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17077301},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","authors":["Rob Cresswell <robcresswell@pm.me>","Frank Heider <frank@brainbo.dev>"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./*":{"types":"./dist/*.d.ts","import":"./dist/*.js"},"./styles.css":"./dist/styles.css"},"gitHead":"588173c08d6b1e1b5f83822af1d6b2b5bd44d504","scripts":{"test":"vitest","build":"./build.ts","format":"prettier --write **/*.{js,vue,ts}","prebuild":"rm -rf dist/","postbuild":"cp styles.css README.md dist/","prepublishOnly":"npm run build"},"_npmUser":{"name":"brnbio","email":"heider669@gmail.com"},"repository":{"url":"git+https://github.com/brnbio/vue-material-design-icons.git","type":"git"},"_npmVersion":"11.6.2","description":"A collection of material design icons as Vue 3 components with TypeScript support","directories":{},"_nodeVersion":"22.21.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","p-map":"^4.0.0","vitest":"^1.0.0","@mdi/js":"7.4.47","ts-node":"^10.9.1","vue-tsc":"^1.8.0","prettier":"^3.0.0","typescript":"^5.0.0","@babel/core":"^7.20.12","@types/node":"^20.0.0","@vue/test-utils":"^2.4.0","@babel/preset-env":"^7.20.2","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-material-design-icons_1.0.0_1762100450000_0.9233676406230109","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@brnbio/vue-material-design-icons","version":"1.0.1","keywords":["vue","vue3","material design icons","mdi","icons","material","icon","svg","vue.js","material design","typescript"],"license":"MIT","_id":"@brnbio/vue-material-design-icons@1.0.1","maintainers":[{"name":"brnbio","email":"heider669@gmail.com"}],"homepage":"https://github.com/brnbio/vue-material-design-icons","bugs":{"url":"https://github.com/brnbio/vue-material-design-icons/issues"},"dist":{"shasum":"f8d6127c18069312db73b0a84103c7a9132f98a0","tarball":"https://registry.npmjs.org/@brnbio/vue-material-design-icons/-/vue-material-design-icons-1.0.1.tgz","fileCount":14903,"integrity":"sha512-LbrVdsoBX1smGDhL9BwueRo54FnFMNKC9Dm2yBxLv9NPVr9sZjIfTleKfp9kcxvsELV39qn+CRYUiceGbk1yTw==","signatures":[{"sig":"MEYCIQD8sdxw7CDpv3l8iTRKWxKNJ4dhrfJ0pTVsTGlT0H6XtwIhAMuANCYRou7PG9ognK6mFzDgb1g7tEBOanQHW0tKOhFk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17072931},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","authors":["Rob Cresswell <robcresswell@pm.me>","Frank Heider <frank@brainbo.dev>"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./*":{"types":"./dist/*.d.ts","import":"./dist/*.js"},"./styles.css":"./dist/styles.css"},"gitHead":"9e49d376bfc8dd98b3138c7ddb8b637ab5f31a0d","scripts":{"test":"vitest","build":"./build.ts","format":"prettier --write **/*.{js,vue,ts}","prebuild":"rm -rf dist/","postbuild":"cp styles.css README.md dist/","prepublishOnly":"npm run build"},"_npmUser":{"name":"brnbio","email":"heider669@gmail.com"},"repository":{"url":"git+https://github.com/brnbio/vue-material-design-icons.git","type":"git"},"_npmVersion":"11.6.2","description":"A collection of material design icons as Vue 3 components with TypeScript support","directories":{},"_nodeVersion":"22.21.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","p-map":"^4.0.0","vitest":"^1.0.0","@mdi/js":"7.4.47","ts-node":"^10.9.1","vue-tsc":"^1.8.0","prettier":"^3.0.0","typescript":"^5.0.0","@babel/core":"^7.20.12","@types/node":"^20.0.0","@vue/test-utils":"^2.4.0","@babel/preset-env":"^7.20.2","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-material-design-icons_1.0.1_1762154919046_0.9561828959355196","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@brnbio/vue-material-design-icons","version":"1.1.0","authors":["Rob Cresswell <robcresswell@pm.me>","Frank Heider <frank@brainbo.dev>"],"license":"MIT","description":"A collection of material design icons as Vue 3 components with TypeScript support","repository":{"type":"git","url":"git+https://github.com/brnbio/vue-material-design-icons.git"},"keywords":["vue","vue3","material design icons","mdi","icons","material","icon","svg","vue.js","material design","typescript"],"type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./*":{"types":"./dist/*.d.ts","import":"./dist/*.js"}},"devDependencies":{"@babel/core":"^7.20.12","@babel/preset-env":"^7.20.2","@iconify-json/material-symbols":"^1.2.44","@types/node":"^20.0.0","@vitejs/plugin-vue":"^5.0.0","@vue/test-utils":"^2.4.0","p-map":"^4.0.0","prettier":"^3.0.0","ts-node":"^10.9.1","typescript":"^5.0.0","vite":"^5.0.0","vitest":"^1.0.0","vue":"^3.4.0","vue-tsc":"^1.8.0"},"peerDependencies":{"vue":"^3.0.0"},"homepage":"https://github.com/brnbio/vue-material-design-icons","bugs":{"url":"https://github.com/brnbio/vue-material-design-icons/issues"},"scripts":{"prebuild":"rm -rf dist/","build":"./build.ts","postbuild":"cp styles.css README.md dist/","prepublishOnly":"npm run build","format":"prettier --write **/*.{js,vue,ts}","test":"vitest"},"gitHead":"a13091bd361893a58c924a20178bd1e2921b6f62","_id":"@brnbio/vue-material-design-icons@1.1.0","_nodeVersion":"25.1.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-DL+o5xqanI3vQj4YvdWS9xLNylcOWQ+gBf/dXm4rtBDjNDAqXbbh5slX2y9s7XanGnlhrjhcrfevXoqf5/dVzg==","shasum":"bcde504444f32edf95c94924a95c6103c1dd218d","tarball":"https://registry.npmjs.org/@brnbio/vue-material-design-icons/-/vue-material-design-icons-1.1.0.tgz","fileCount":31617,"unpackedSize":37705080,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGIFq7nPPWRvy0aLuPQ/e4m1UyMTeyOQwFzyH/Tfvb+eAiAEAv9H0aNR/OmcjqyGv76Wkl2zEjVcvQxvfbhmTEe66Q=="}]},"_npmUser":{"name":"brnbio","email":"heider669@gmail.com"},"directories":{},"maintainers":[{"name":"brnbio","email":"heider669@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-material-design-icons_1.1.0_1762244520313_0.6140495138036282"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-02T16:20:49.829Z","modified":"2025-11-04T08:22:00.811Z","1.0.0":"2025-11-02T16:20:50.233Z","1.0.1":"2025-11-03T07:28:39.346Z","1.1.0":"2025-11-04T08:22:00.618Z"},"bugs":{"url":"https://github.com/brnbio/vue-material-design-icons/issues"},"license":"MIT","homepage":"https://github.com/brnbio/vue-material-design-icons","keywords":["vue","vue3","material design icons","mdi","icons","material","icon","svg","vue.js","material design","typescript"],"repository":{"type":"git","url":"git+https://github.com/brnbio/vue-material-design-icons.git"},"description":"A collection of material design icons as Vue 3 components with TypeScript support","maintainers":[{"name":"brnbio","email":"heider669@gmail.com"}],"readme":"# Vue Material Design Icon Components\n\nA collection of Material Design Icons for Vue 3, exported as components with TypeScript support. Sourced from the\n[MaterialDesign project](https://github.com/Templarian/MaterialDesign 'MaterialDesign Github page').\n\n## Features\n\n- 🎯 **Vue 3 Composition API** - Built for modern Vue 3 applications\n- 📦 **Tree-shakable** - Only import the icons you need\n- 🎨 **TypeScript Support** - Full type definitions included\n- ⚡ **Lightweight** - Minimal runtime overhead\n- ♿ **Accessible** - ARIA attributes included\n- 🔧 **Reactive** - All props are reactive and work with Vue's reactivity system\n\n## Installation\n\n```bash\nnpm install @brnbio/vue-material-design-icons\n```\n\n**or**\n\n```bash\nyarn add @brnbio/vue-material-design-icons\n```\n\n**or**\n\n```bash\npnpm add @brnbio/vue-material-design-icons\n```\n\n## Usage\n\n### Basic Usage (Recommended)\n\nImport icons directly from the package using named exports:\n\n```vue\n<script setup lang=\"ts\">\nimport { Menu, Android, Home } from '@brnbio/vue-material-design-icons';\n</script>\n\n<template>\n  <Menu />\n  <Android :size=\"32\" />\n  <Home fillColor=\"#ff0000\" title=\"Home\" />\n</template>\n```\n\n### With Options API\n\n```vue\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { Menu, Android } from '@brnbio/vue-material-design-icons';\n\nexport default defineComponent({\n  components: {\n    Menu,\n    Android,\n  },\n});\n</script>\n\n<template>\n  <Menu />\n  <Android :size=\"48\" />\n</template>\n```\n\n### Global Registration\n\n```typescript\nimport { createApp } from 'vue';\nimport { Menu, Android, Home } from '@brnbio/vue-material-design-icons';\nimport App from './App.vue';\n\nconst app = createApp(App);\n\napp.component('MenuIcon', Menu);\napp.component('AndroidIcon', Android);\napp.component('HomeIcon', Home);\n\napp.mount('#app');\n```\n\n### Optional Stylesheet\n\nAdd the included CSS to make icons scale with surrounding text:\n\n```typescript\nimport '@brnbio/vue-material-design-icons/styles.css';\n```\n\n> **Note:** If you intend to handle sizing with the `size` prop, you may not want to use this as it may conflict.\n\n## Props\n\nAll icons accept the following props:\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `title` | `string` | `undefined` | Accessible title for screen readers. If provided, sets `aria-label`. If not provided, icon is hidden from screen readers with `aria-hidden=\"true\"`. |\n| `fillColor` | `string` | `'currentColor'` | Fill color of the icon. Accepts any valid CSS color value. |\n| `size` | `number \\| string` | `24` | Size of the icon (width and height in pixels). |\n\n### Examples\n\n```vue\n<template>\n  <!-- Basic usage -->\n  <Menu />\n\n  <!-- With title for accessibility -->\n  <Android title=\"Android operating system\" />\n\n  <!-- Custom size -->\n  <Home :size=\"32\" />\n\n  <!-- Custom color -->\n  <Heart fillColor=\"#ff0000\" />\n\n  <!-- Combine multiple props -->\n  <Star\n    title=\"Favorite\"\n    fillColor=\"gold\"\n    :size=\"48\"\n  />\n\n  <!-- Click event -->\n  <Close @click=\"handleClose\" />\n</template>\n```\n\n### Additional Attributes\n\nAll icons support `v-bind=\"$attrs\"`, which means you can pass any HTML attributes:\n\n```vue\n<Menu\n  class=\"my-custom-class\"\n  style=\"margin: 10px\"\n  data-testid=\"menu-icon\"\n/>\n```\n\n## Icons\n\nA list of all available icons can be found at the\n[Material Design Icons website](https://materialdesignicons.com/ 'Material Design Icons website').\n\nThe icons are exported with **PascalCase** names. For example:\n- `account` → `Account`\n- `arrow-left` → `ArrowLeft`\n- `checkbox-marked-circle` → `CheckboxMarkedCircle`\n- `ultra-high-definition` → `UltraHighDefinition`\n\nImport them like this:\n\n```typescript\nimport { Account, ArrowLeft, CheckboxMarkedCircle } from '@brnbio/vue-material-design-icons';\n```\n\n## TypeScript Support\n\nThis library is written in TypeScript and includes full type definitions. You'll get autocomplete and type checking out of the box:\n\n```typescript\nimport type { IconProps } from '@brnbio/vue-material-design-icons';\nimport { Menu } from '@brnbio/vue-material-design-icons';\n\nconst iconProps: IconProps = {\n  title: 'Menu',\n  fillColor: 'blue',\n  size: 32,\n};\n```\n\n## Custom Styling\n\nIf you want custom sizing with CSS classes, you can add your own styles:\n\n```css\n.material-design-icon.icon-2x {\n  height: 2em;\n  width: 2em;\n}\n\n.material-design-icon.icon-2x > .material-design-icon__svg {\n  height: 2em;\n  width: 2em;\n}\n```\n\nThen use it in your component:\n\n```vue\n<template>\n  <Menu class=\"icon-2x\" />\n</template>\n```\n\nAlternatively, use the `size` prop for dynamic sizing:\n\n```vue\n<template>\n  <Menu :size=\"48\" />\n</template>\n```","readmeFilename":"README.md"}