{"_id":"@frontiers/pictograms","_rev":"4-49303c28b904a2948023e7db3ecdcbbb","name":"@frontiers/pictograms","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"@frontiers/pictograms","version":"1.0.0","keywords":["pictograms","illustrations","svg","vue","vue3","vue-components","components","frontiers","design-system","ui-components"],"author":{"name":"Frontiers"},"license":"MIT","_id":"@frontiers/pictograms@1.0.0","maintainers":[{"name":"frontiersadmin","email":"admin@frontiersin.org"},{"name":"lukasz.urzedowski","email":"lukasz.urzedowski@frontiersin.org"},{"name":"alexis_frontiers","email":"alexis.reina@frontiersin.org"}],"homepage":"https://github.com/frontiersin/primeuix/tree/main/packages/pictograms#readme","bugs":{"url":"https://github.com/frontiersin/primeuix/issues"},"dist":{"shasum":"fb212075bd6175ea57bc895206b12e81b7de44dd","tarball":"https://registry.npmjs.org/@frontiers/pictograms/-/pictograms-1.0.0.tgz","fileCount":109,"integrity":"sha512-sw+9U+fF0PveQvMoMjSQPfoB2oH4LPr3dOZOfAJnhpSZSh+JaLjSdDt7IBXM/Lc6BUpkPOW3WA7bJziL87TOWg==","signatures":[{"sig":"MEUCIQCnDkinY8BFn1BJ1jzhgu2Ct4+4FBgkXC5z5qkUjIkezAIgSTReIDEwnySc8ymoOHR5/JS6i8y1F8jmQxlJlxvJdcQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":276486},"main":"index.js","type":"module","types":"types.d.ts","exports":{".":{"types":"./types.d.ts","import":"./index.js"},"./svg/*":{"import":"./svg/*.svg"},"./components":{"types":"./types.d.ts","import":"./components/index.js"},"./components/*":{"import":"./components/*.vue"},"./package.json":"./package.json"},"gitHead":"8346c6c5b7ff6b72f09f771008b1a8393b283da6","scripts":{"build":"npm run export && npm run generate","export":"node scripts/export-pictograms.js","generate":"node scripts/generate-vue-components.js"},"_npmUser":{"name":"alexis_frontiers","email":"alexis.reina@frontiersin.org"},"repository":{"url":"git+https://github.com/frontiersin/primeuix.git","type":"git","directory":"packages/pictograms"},"_npmVersion":"10.9.3","description":"A comprehensive pictogram library with colorful SVG illustrations and Vue 3 components for the Frontiers design system","directories":{},"_nodeVersion":"22.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"dotenv":"^16.4.5"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/pictograms_1.0.0_1761725323471_0.021587740167787972","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@frontiers/pictograms","version":"1.0.1","keywords":["pictograms","illustrations","svg","vue","vue3","vue-components","components","frontiers","design-system","ui-components"],"author":{"name":"Frontiers"},"license":"MIT","_id":"@frontiers/pictograms@1.0.1","maintainers":[{"name":"frontiersadmin","email":"admin@frontiersin.org"},{"name":"lukasz.urzedowski","email":"lukasz.urzedowski@frontiersin.org"},{"name":"alexis_frontiers","email":"alexis.reina@frontiersin.org"}],"homepage":"https://github.com/frontiersin/primeuix/tree/main/packages/pictograms#readme","bugs":{"url":"https://github.com/frontiersin/primeuix/issues"},"dist":{"shasum":"9969b54e02851b8456dd6a54e71642a903e28993","tarball":"https://registry.npmjs.org/@frontiers/pictograms/-/pictograms-1.0.1.tgz","fileCount":109,"integrity":"sha512-IXP3wo/ei08EQl2Cis4v3TdKqFNa27yQmGnvCrm2v/nk4FhifoPyVucfBDPrxJWfSt55Q0hqpko/1XsoscEDfg==","signatures":[{"sig":"MEQCIByguEYlPgwS0uY8cVvzN9qUxHQBlWb/NweI5zDGzG/OAiBQ2Exr+4+qOGO3KuXk1pwUTdz35sWBbWpIb7NAnYsiiA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":280577},"main":"index.js","type":"module","_from":"file:frontiers-pictograms-1.0.1.tgz","types":"types.d.ts","exports":{".":{"types":"./types.d.ts","import":"./index.js"},"./svg/*":{"import":"./svg/*.svg"},"./components":{"types":"./types.d.ts","import":"./components/index.js"},"./components/*":{"import":"./components/*.vue"},"./package.json":"./package.json"},"scripts":{"build":"npm run export && npm run generate","export":"node scripts/export-pictograms.js","generate":"node scripts/generate-vue-components.js"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:cacf09c7-d94a-44d5-8546-f303723fb6bc"}},"_resolved":"/tmp/a27154decb922f135dd353f6ab2bf65d/frontiers-pictograms-1.0.1.tgz","_integrity":"sha512-IXP3wo/ei08EQl2Cis4v3TdKqFNa27yQmGnvCrm2v/nk4FhifoPyVucfBDPrxJWfSt55Q0hqpko/1XsoscEDfg==","repository":{"url":"git+https://github.com/frontiersin/primeuix.git","type":"git","directory":"packages/pictograms"},"_npmVersion":"11.6.2","description":"A comprehensive pictogram library with colorful SVG illustrations and Vue 3 components for the Frontiers design system","directories":{},"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"dotenv":"^16.4.5"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/pictograms_1.0.1_1761731287809_0.570727412913459","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@frontiers/pictograms","version":"1.1.0","keywords":["pictograms","illustrations","svg","vue","vue3","vue-components","components","frontiers","design-system","ui-components"],"author":{"name":"Frontiers"},"license":"MIT","_id":"@frontiers/pictograms@1.1.0","maintainers":[{"name":"frontiersadmin","email":"admin@frontiersin.org"},{"name":"lukasz.urzedowski","email":"lukasz.urzedowski@frontiersin.org"},{"name":"alexis_frontiers","email":"alexis.reina@frontiersin.org"}],"homepage":"https://github.com/frontiersin/primeuix/tree/main/packages/pictograms#readme","bugs":{"url":"https://github.com/frontiersin/primeuix/issues"},"dist":{"shasum":"7dfc159cce06fbf5a46d09a0a544715e436c3df9","tarball":"https://registry.npmjs.org/@frontiers/pictograms/-/pictograms-1.1.0.tgz","fileCount":109,"integrity":"sha512-UEX05NUOQ91gsOF9ya8dwj64rI7esWLV2hDbK5iOtMCpEayGdyntctTg1PuRUaePRKZO/kjuustVjCU2d90iug==","signatures":[{"sig":"MEYCIQCcvxGnqkrYgCO0sW76c1GE4yomSNHd5ekIp9gHTRoj3QIhAPF+SljAINIPy6NCggxU3BaQKvCTct2T5vmG/3yMWmhW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":279687},"main":"index.js","type":"module","_from":"file:frontiers-pictograms-1.1.0.tgz","types":"types.d.ts","exports":{".":{"types":"./types.d.ts","import":"./index.js"},"./svg/*":{"import":"./svg/*.svg"},"./components":{"types":"./types.d.ts","import":"./components/index.js"},"./components/*":{"import":"./components/*.vue"},"./package.json":"./package.json"},"scripts":{"build":"npm run export && npm run generate","export":"node scripts/export-pictograms.js","generate":"node scripts/generate-vue-components.js"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:cacf09c7-d94a-44d5-8546-f303723fb6bc"}},"_resolved":"/tmp/3f15f94ffea42a1571a7db9aeaa0cb31/frontiers-pictograms-1.1.0.tgz","_integrity":"sha512-UEX05NUOQ91gsOF9ya8dwj64rI7esWLV2hDbK5iOtMCpEayGdyntctTg1PuRUaePRKZO/kjuustVjCU2d90iug==","repository":{"url":"git+https://github.com/frontiersin/primeuix.git","type":"git","directory":"packages/pictograms"},"_npmVersion":"11.6.2","description":"A comprehensive pictogram library with colorful SVG illustrations and Vue 3 components for the Frontiers design system","directories":{},"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"dotenv":"^16.4.5"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/pictograms_1.1.0_1761733892968_0.2268036362618291","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@frontiers/pictograms","version":"1.2.0","description":"A comprehensive pictogram library with colorful SVG illustrations and Vue 3 components for the Frontiers design system","main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs"},"./components":{"types":"./dist/components/index.d.ts","import":"./dist/components/index.mjs"},"./components/*":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.mjs"},"./svg/*":{"import":"./svg/*.svg"},"./package.json":"./package.json"},"keywords":["pictograms","illustrations","svg","vue","vue3","vue-components","components","frontiers","design-system","ui-components"],"author":{"name":"Frontiers"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/frontiersin/primeuix.git","directory":"packages/pictograms"},"bugs":{"url":"https://github.com/frontiersin/primeuix/issues"},"homepage":"https://github.com/frontiersin/primeuix/tree/main/packages/pictograms#readme","peerDependencies":{"vue":"^3.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.0.0","dotenv":"^16.4.5","rimraf":"^6.0.0","vite":"^7.0.0","vue":"^3.5.0"},"publishConfig":{"access":"public"},"scripts":{"export":"node scripts/export-pictograms.js","generate":"node scripts/generate-vue-components.js","presync":"rimraf svg/*.svg components/*.vue components/index.js components/types.d.ts","sync":"npm run export && npm run generate","build":"vite build && node scripts/post-build.js","dev":"vite build --watch"},"_id":"@frontiers/pictograms@1.2.0","_integrity":"sha512-PU+53eVtcNHN4xGU+3Av4DzrzPYxVHOticZYQvp41ueOxzueRBNGKnNBKw7cWxZXfcoX9TJkj7Rze1jFwDXV5A==","_resolved":"/tmp/1b330f0a7a79d4ba25a0e2598d401e6c/frontiers-pictograms-1.2.0.tgz","_from":"file:frontiers-pictograms-1.2.0.tgz","_nodeVersion":"22.21.1","_npmVersion":"11.7.0","dist":{"integrity":"sha512-PU+53eVtcNHN4xGU+3Av4DzrzPYxVHOticZYQvp41ueOxzueRBNGKnNBKw7cWxZXfcoX9TJkj7Rze1jFwDXV5A==","shasum":"97fcc58aa481fa5fc948c3251a97da8227338af4","tarball":"https://registry.npmjs.org/@frontiers/pictograms/-/pictograms-1.2.0.tgz","fileCount":59,"unpackedSize":284848,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCN0xvF1QFYzm0m54ODXf/RSvc1GHcYmHG6mahiy62JiAIgKLPP88j4YWfHy0KV+aZpeph7CAqvATbaHiftCnw2G8I="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:cacf09c7-d94a-44d5-8546-f303723fb6bc"}},"directories":{},"maintainers":[{"name":"frontiersadmin","email":"admin@frontiersin.org"},{"name":"lukasz.urzedowski","email":"lukasz.urzedowski@frontiersin.org"},{"name":"alexis_frontiers","email":"alexis.reina@frontiersin.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/pictograms_1.2.0_1768551365233_0.6321063015813775"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-29T08:08:43.368Z","modified":"2026-01-16T08:16:05.580Z","1.0.0":"2025-10-29T08:08:43.685Z","1.0.1":"2025-10-29T09:48:08.014Z","1.1.0":"2025-10-29T10:31:33.268Z","1.2.0":"2026-01-16T08:16:05.438Z"},"bugs":{"url":"https://github.com/frontiersin/primeuix/issues"},"author":{"name":"Frontiers"},"license":"MIT","homepage":"https://github.com/frontiersin/primeuix/tree/main/packages/pictograms#readme","keywords":["pictograms","illustrations","svg","vue","vue3","vue-components","components","frontiers","design-system","ui-components"],"repository":{"type":"git","url":"git+https://github.com/frontiersin/primeuix.git","directory":"packages/pictograms"},"description":"A comprehensive pictogram library with colorful SVG illustrations and Vue 3 components for the Frontiers design system","maintainers":[{"name":"frontiersadmin","email":"admin@frontiersin.org"},{"name":"lukasz.urzedowski","email":"lukasz.urzedowski@frontiersin.org"},{"name":"alexis_frontiers","email":"alexis.reina@frontiersin.org"}],"readme":"# @frontiers/pictograms\n\nA comprehensive pictogram library with colorful SVG illustrations and Vue 3 components for the Frontiers design system.\n\n## Features\n\n- 🎨 **Colorful Illustrations** - Full-color pictograms (not monochrome like icons)\n- 📐 **256px Size** - Large 2xl size variants for prominent displays\n- 🎭 **Color Variants** - Multiple color schemes per pictogram (Red, Blue, Green, etc.)\n- ⚡ **Vue 3 Components** - Ready-to-use Vue components with TypeScript support\n- 📦 **Direct SVG Access** - Import SVG files directly if needed\n- 🔧 **Customizable Size** - Adjustable size prop for Vue components\n\n## Installation\n\n```bash\nnpm install @frontiers/pictograms\n```\n\n## Usage\n\n### Vue Components\n\n```vue\n<script setup>\nimport {\n  SearchBluePictogram,\n  DeniedRedPictogram,\n  ScienceBluePictogram,\n} from \"@frontiers/pictograms\"\n</script>\n\n<template>\n  <div>\n    <!-- Default size (256px) -->\n    <SearchBluePictogram />\n\n    <!-- Custom size -->\n    <DeniedRedPictogram :size=\"128\" />\n    <ScienceBluePictogram size=\"512\" />\n\n    <!-- With custom classes -->\n    <SearchBluePictogram :size=\"200\" class=\"my-custom-class\" />\n  </div>\n</template>\n```\n\n### Direct SVG Import\n\n```javascript\nimport searchBlue from \"@frontiers/pictograms/svg/search-pictogram-blue.svg\"\nimport deniedRed from \"@frontiers/pictograms/svg/denied-pictogram-red.svg\"\n```\n\n## Component Naming\n\nPictogram components follow this naming pattern:\n\n- **SVG filename**: `{name}-pictogram-{color}.svg` (kebab-case)\n- **Component name**: `{Name}{Color}Pictogram` (PascalCase, \"-pictogram-\" removed to avoid redundancy)\n\nExamples:\n\n| SVG File                     | Component Name         |\n| ---------------------------- | ---------------------- |\n| `search-pictogram-blue.svg`  | `SearchBluePictogram`  |\n| `denied-pictogram-red.svg`   | `DeniedRedPictogram`   |\n| `science-pictogram-blue.svg` | `ScienceBluePictogram` |\n\n## Color Variants\n\nPictograms come in multiple color variants:\n\n- 🔵 Blue (default)\n- 🔴 Red\n- 🟢 Green\n- 🟡 Yellow\n- 🟠 Orange\n- 🟣 Purple\n\nIf a pictogram doesn't have a specific color variant, the blue variant is used as default.\n\n## Props\n\nAll pictogram components accept the following props:\n\n### `size`\n\n- **Type**: `Number | String`\n- **Default**: `256`\n- **Description**: Width and height of the pictogram in pixels\n\n```vue\n<AccessibilityBluePictogram :size=\"128\" />\n<AccessibilityBluePictogram size=\"256\" />\n```\n\n## Differences from Icons\n\n| Feature          | Icons                     | Pictograms             |\n| ---------------- | ------------------------- | ---------------------- |\n| **Size**         | 24px                      | 256px                  |\n| **Colors**       | Monochrome (currentColor) | Full color (preserved) |\n| **Usage**        | UI elements, buttons      | Illustrations, headers |\n| **Default Size** | 24                        | 256                    |\n| **Variants**     | Size variants             | Color + size variants  |\n\n## TypeScript Support\n\nThis package includes TypeScript definitions:\n\n```typescript\nimport type { PictogramComponent, PictogramProps } from \"@frontiers/pictograms\"\n\nconst MyPictogram: PictogramComponent = AccessibilityBluePictogram\n```\n\n## Development\n\n### Building from Figma\n\nThis package includes scripts to export and generate components from Figma:\n\n```bash\n# Export SVGs from Figma\nnpm run export\n\n# Generate Vue components from SVGs\nnpm run generate\n\n# Do both\nnpm run build\n```\n\n**Requirements**:\n\n- Figma Personal Access Token (set in `.env` file as `FIGMA_TOKEN`)\n- Access to the Frontiers Foundations Figma file\n\n### Figma Source\n\nPictograms are sourced from:\n\n**File**: [Foundations](https://www.figma.com/design/jDOnqag4paB2kiJtu2AbqK/Foundations)  \n**Page**: 🔵 Pictograms (node-id=10265-817)  \n**Size**: 2xl(256px) variants\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please see the main repository for contribution guidelines.\n\n## Related Packages\n\n- **[@frontiers/icons](../icons)** - Monochrome icon library (24px)\n- **[@frontiers/prime-preset](../preset)** - PrimeVue theme preset\n- **[@frontiers/tailwind-plugin](../tailwind-plugin)** - Tailwind CSS utilities\n\n---\n\n**Built for PrimeVue • Customized for Frontiers**\n","readmeFilename":"README.md"}