{"_id":"@cagov/ds-icons","_rev":"9-f912cea0458e1b46b7d48e9b1f8466d2","name":"@cagov/ds-icons","dist-tags":{"latest":"1.0.1"},"versions":{"0.0.1":{"name":"@cagov/ds-icons","version":"0.0.1","_id":"@cagov/ds-icons@0.0.1","maintainers":[{"name":"zakiyak","email":"zakiya.khabir@digital.ca.gov"},{"name":"timothyshambra","email":"timothy.shambra@gmail.com"},{"name":"xjensen","email":"github@id.xjensen.com"},{"name":"carter.medlin","email":"carter.medlin@gmail.com"},{"name":"aaronhans","email":"aaronhans@gmail.com"},{"name":"chacha-california","email":"chach.sikes@digital.ca.gov"},{"name":"kkoryaka","email":"konstantin.koryaka@state.ca.gov"}],"homepage":"https://github.com/cagov/design-system/tree/main#readme","bugs":{"url":"https://github.com/cagov/design-system/issues"},"dist":{"shasum":"4c9ecaec08e0620b0523cf31b67debedbdbac147","tarball":"https://registry.npmjs.org/@cagov/ds-icons/-/ds-icons-0.0.1.tgz","fileCount":535,"integrity":"sha512-V1ia1hpgBcvLWBROMg7UgDOIh+25vC9r0d3+FmVZuNchLaUXhEfu+lpWfL8tXgT+UhuYaRbvkgK8FDs2Z6ZG8A==","signatures":[{"sig":"MEUCIQDDfKr5mtGRlIoZ4clXLD5ijFpwL9KbWoEsxJdq05/JpAIgAX3EdAGK1U0lkgGceJc+BdDmz/30OJ37uNSNxBtrfa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2619441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPilEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu9A/+PR31bQSi55rysX7nlB4/QptRiZ9LpZB+q3jLCi4rsvT+Wn//\r\nCYcPrlVqqbXcmE2OA051BeZOtCMdlz1ZHwZNwQe4JpP8X9NPOu8WTIcqAA8U\r\nMBZEaJYO8dSOYOURqothFKNMsB14Ob7jVUmKhj6U4Qwalmb+bYthof9MQc2G\r\n0OQLV+igx+sNDNPI2WA5kv1ux19kil4MxBFQU7HMO8vEy3VDOD0jpYOj5iF2\r\nxSbv3MGxHxrfa92LyVvvvoID5MHGziatx2iu7E2V/p6QOF3WCIOCGDZKTjZx\r\nPdKtaVrrfu0I87nv1ThXjBVQYkzWixcjxdO+mUxjRU2z0fdymXaiGrCoRPQ5\r\nR8nuTqs50CJsxuZdI84pNcQnM/phyG94pPXXEWQGkFI/tDx6d4OQJ9JL7E79\r\nh+Nzvl0lLKg5Sv9ItwBMUlBPaRaHe/j+Rly9ryEkHOnVykkK8cKhxfggh+jJ\r\nhjKe8c4K1HazVTCxqV8yNz8Zza79Xg7s/KZ+ERR29e9yes6UZcsvFB7RFFqb\r\niQpcv1ASldtDOJGwA28ppPKs5xm5btTMeJ2JeijL+7arTvc1I6A6N2ACb/Zu\r\nRctAjcN+Bs/sy7Qsyqn3K4T3s8p01hOdXPWeGiSYSytouJfNO2L5AiHvCzNb\r\nsNe8gK+pjM2KMU7byQKRKe73DkWsthIfnis=\r\n=pG0f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","gitHead":"150c2cef16671cd885987253ff1dc191d207ded0","scripts":{"build":"echo 'no build command. See project README.'","dev:icons":"node scripts/generateIcons.js","dev:library":"node scripts/generateLibrary.js ","dev:font-sass":"sass src/icon-font.scss src/icon-font.css","dev:clear-cache":"run-s dev:icons dev:library && cd ../../ && npm run site:build","dev:sprite-some":"node scripts/generateSpriteSome.js --i=$npm_config_ids"},"_npmUser":{"name":"zakiyak","email":"zakiya.khabir@digital.ca.gov"},"repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"_npmVersion":"8.5.0","description":"A utility component for mangaging CA State Template v5.6.1 icons in the Design System.","directories":{},"_nodeVersion":"16.14.2","_hasShrinkwrap":false,"devDependencies":{"glob":"^7.2.0","sass":"^1.49.8","yargs":"^17.3.1","node-wget":"^0.4.3","font-blast":"^0.7.0","npm-run-all":"^4.1.5","file-get-contents":"^1.0.0","svg-sprite-generator":"^0.0.7"},"_npmOperationalInternal":{"tmp":"tmp/ds-icons_0.0.1_1648240964488_0.09543777798978526","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.1":{"name":"@cagov/ds-icons","version":"1.0.1","_id":"@cagov/ds-icons@1.0.1","maintainers":[{"name":"jbum","email":"jbum@jbum.com"},{"name":"zakiyak","email":"zakiya@innovation.ca.gov"},{"name":"timothyshambra","email":"timothy.shambra@gmail.com"},{"name":"xjensen","email":"github@id.xjensen.com"},{"name":"aaronhans","email":"aaronhans@gmail.com"},{"name":"chacha-california","email":"chach.sikes@innovation.ca.gov"},{"name":"kkoryaka","email":"konstantin.koryaka@state.ca.gov"}],"homepage":"https://github.com/cagov/design-system/tree/main#readme","bugs":{"url":"https://github.com/cagov/design-system/issues"},"dist":{"shasum":"9735842afeec357acf1392b3d3cb1f4bbb70a52b","tarball":"https://registry.npmjs.org/@cagov/ds-icons/-/ds-icons-1.0.1.tgz","fileCount":521,"integrity":"sha512-/E3N+WN5U+y5y5T0o9IhpYhuOuMAGLCzpkxPFUUw1q8ypk9oZ0hmO6eJgdLoHeb+3FA9bgAA6lvWQuO4lHJotg==","signatures":[{"sig":"MEUCIC5+EXnZ+hNNMgfZEa9XNqzI1tT1QTZ++YLz+WwHfc/CAiEAzQAO68znqFM8erwZpUcKvCAkaHwhXHDHXLWzJwAqZpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2690229},"main":"index.js","type":"module","volta":{"node":"16.15.1"},"gitHead":"479f1353fed9d262e3d33cd8fbaad72a8c7f3da3","scripts":{"build":"echo 'no build command. See project README.'","dev:sprite":"node scripts/generateSprite.js","dev:library":"node scripts/generateLibrary.js ","dev:font-sass":"sass src/icon-font.scss src/icon-font.css","dev:clear-cache":"run-s dev:sprite dev:library && cd ../../ && npm run site:build","dev:sprite-some":"node scripts/generateSpriteSome.js"},"_npmUser":{"name":"xjensen","email":"github@id.xjensen.com"},"repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"_npmVersion":"10.2.4","description":"A utility component for mangaging CA State Template v5.6.1 icons in the Design System.","directories":{},"_nodeVersion":"21.6.2","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.52.3","yargs":"^17.5.1","npm-run-all":"^4.1.5","file-get-contents":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ds-icons_1.0.1_1709242301775_0.2973133608690639","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2022-03-25T20:42:44.432Z","modified":"2026-07-03T21:02:34.247Z","0.0.1":"2022-03-25T20:42:44.690Z","1.0.1":"2024-02-29T21:31:42.055Z"},"bugs":{"url":"https://github.com/cagov/design-system/issues"},"homepage":"https://github.com/cagov/design-system/tree/main#readme","repository":{"url":"git+https://github.com/cagov/design-system.git#main","type":"git"},"description":"A utility component for mangaging CA State Template v5.6.1 icons in the Design System.","maintainers":[{"name":"chacha-california","email":"chach.sikes@innovation.ca.gov"},{"name":"jbum","email":"jbum@jbum.com"},{"name":"xjensen","email":"github@id.xjensen.com"},{"name":"zakiyak","email":"zakiya@innovation.ca.gov"}],"readme":"# Icons\n\nIcons are visual cues that help people find key information and common actions. They visually represent:\n\n- An idea or thing\n- What something does\n- How someone can interact with it\n\nIcons reduce cognitive load by communicating meanings or actions simply and accurately.\n\n## When and how to use it\n\nUse icons as visual indicators to make key actions or information easy to find. [Organize content strategically](https://designsystem.webstandards.ca.gov/style/content/organize-content-strategically/) before using icons. Choose an existing icon from [Version 5.6.2 of the CAGov icon library](#icon-library) whenever possible.\n\nUse icons for the same purpose consistently to avoid confusion for visitors and reduce cognitive load. Select an icon that’s as closely tied to the specific information or action as possible. When it may not be clear what the icon means, pair it with a label or supporting text.\n\nThe Design System uses a standard set of icons for common actions. Several components incorporate icons automatically. This ensures consistency, and fewer steps for content designers. Some examples include:\n\n- Expand icon in the [accordion](https://designsystem.webstandards.ca.gov/components/accordion/readme/)\n- Hamburger icon in the [site navigation](https://designsystem.webstandards.ca.gov/components/site-navigation/readme/) menu for mobile devices\n- External and pdf link icons in the [link icon](https://designsystem.webstandards.ca.gov/components/link-icon/readme/)\n- Social media icons in the [site footer](https://designsystem.webstandards.ca.gov/components/site-footer/readme/)\n- Up arrow icon in the [back to top button](https://designsystem.webstandards.ca.gov/components/back-to-top/readme/)\n\nFor a [page alert](https://designsystem.webstandards.ca.gov/components/page-alert/readme/), choose an icon that supports the tone of the alert.\n\n### How not to use it\n\nDo not use an icon:\n\n- That does not relate to the meaning or action\n- Without a label if it is not widely understood\n- For more than one function or concept\n- Where an image or graphic is more appropriate\n- For decoration\n- If it creates visual clutter (like using too many on a page)\n- As a shortcut to guide visitors to important information without structuring content strategically\n\n## Specs\n\n| Property     | Value    |\n| ------------ | -------- |\n| Machine name | ds-icons |\n| JavaScript   | yes      |\n\n## Project installation\n\n### Method 1\n\n#### Minimal sprite and JavaScript\n\nRecommended for projects that use 10 - 200 icons.\n\nThe instructions assume familiarity with [npm](https://npmjs.com) package management tool, modern JavaScript techniques, and [Sass](https://sass-lang.com/).\n\n1. Identify all the icons you will need for your project by id using the <a href=\"#icon-library\">Icon library</a> below.\n\n2. `npm install @cagov/ds-icons`\n\n3. Run the command `npm run dev:sprite-some [ids]` to generate a the sprite\n\n   - Example: `npm run dev:sprite-some gear arrow-down left`\n\n4. The generated sprite will be called `cagovSomeIcons.svg`.\n\n5. Include the generated sprite and ./index.js as a module in your project or page.\n\n6. Place individual icon inline with `<cagov-icon data-icon=\"[id]\"></cagov-icon>`\n\n### Demo and sample markup\n\n<html-preview>\n\n```html preview\n<div\n  style=\"display:grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; text-align: center;\"\n>\n  <!--Decorative-->\n  <cagov-icon data-icon=\"arrow-down\"></cagov-icon>\n  <cagov-icon data-icon=\"drive\"></cagov-icon>\n  <!--Functional-->\n  <cagov-icon data-icon=\"gear\" data-sr=\"Settings\"></cagov-icon>\n  <cagov-icon data-icon=\"left\" data-sr=\"Next Page\"></cagov-icon>\n</div>\n```\n\n</html-preview>\n\n### Method 2\n\n#### Direct download and include.\n\nRecommended for projects that use 1-9 icons.\n\n1. Identify the icon(s) you will need for your project by id using the <a href=\"#icon-library\">Icon library</a> below.\n\n2. Click the Download link.\n\n3. Copy/paste or reference the icon in your project.\n\n### Method 3\n\n#### Icon font and CSS.\n\nRecommended for projects where content authors need to be able to add any font inline using only HTML.\n\n2. Copy the `src/fonts` folder to your web app.\n\n3. Copy the `src/icon-font.css` file to your web app.\n\n4. Include the CSS in your project or page. The CSS must be at the same directory level as the `fonts` folder.\n\n5. Place individual icon in HTML using `<span class=\"ca-gov-icon-[id]\" aria-hidden=\"true\"></span>`\n\n### Demo and sample markup\n\n<html-preview>\n\n```html preview\n<span class=\"ca-gov-icon-audio\" aria-hidden=\"true\"></span>\n<span class=\"ca-gov-icon-drive\" aria-hidden=\"true\"></span>\n<span class=\"ca-gov-icon-ferry\" aria-hidden=\"true\"></span>\n<span class=\"ca-gov-icon-van\" aria-hidden=\"true\"></span>\n```\n\n</html-preview>\n\n<!-- If the title is simply `Accessibility`, the display of the accessibility icon breaks. -->\n\n## Accessibility recommendations\n\n### Component-specific accessibility review\n\nThese icons are decorative by default and use the `aria-hidden` attribute. Associated text can be made available to screen readers using [Method 1](#method-1) and the attribute pattern `data-sr=\"My descriptive text.\"` When using Methods 2 and 3, be mindful of accessibility best practices.\n\n### Standard accessibility review\n\nAs a component in Alpha status, this component must pass the following accessibility reviews every time a new version is published:\n\n- Tested with the [axe](https://www.deque.com/axe/) accessibility tool and passes all automated [WCAG](https://www.w3.org/TR/WCAG21/) Level AA checks\n- Reviewed with the [VoiceOver](https://www.apple.com/voiceover/info/guide/_1121.html) screen reader on desktop\n- Verified keyboard navigation and that all actionable elements of the component are reachable via keyboard commands only\n- Reviewed component layout on a variety of screen sizes\n\n## Contributor/developer documentation\n\n- [Icon Library Contributors Documentation](https://github.com/cagov/design-system/blob/main/components/icons/CONTRIBUTORS.md)\n\n## Icon library\n\nVersion 5.6.2 of the [CAGov icon library](https://template.webstandards.ca.gov/sample/icon-fonts.html). Download individual svgs using the links below.\n\n{% include 'layouts/icon-library.njk' %}\n","readmeFilename":"README.md"}