Paper Icon Library — Lightweight SVG Icons for Modern UIs

Example:

<button class="btn">   <span class="paper-icon paper-icon-plus" aria-hidden="true"></span>   Add item </button> 

CSS:

.paper-icon { width: 1em; height: 1em; display:inline-block; vertical-align:middle; background-size:contain; background-repeat:no-repeat; } .paper-icon-plus { background-image: url('/icons/plus.svg'); } 

React

• Use provided React components (if available) or create a small Icon wrapper.

Using provided component:

import { SearchIcon } from 'paper-icon-library/react'; function SearchButton(){    return (     <button aria-label="Search">       <SearchIcon width={20} height={20} />     </button>   ); } 

Creating a wrapper for inline SVGs:

import icons from './icons'; // map of SVG strings or components function Icon({name, size=16, ariaLabel}) {   const Svg = icons[name];   return <Svg width={size} height={size} aria-label={ariaLabel} role={ariaLabel ? 'img' : 'presentation'} />; } 

Vue

• Register components globally or import per-component. Use v-html for raw SVGs when necessary, but prefer components for reactivity and props.

Example:

<template>   <button :aria-label="label">     <SearchIcon :width="24" :height="24" />   </button> </template> <script> import { SearchIcon } from 'paper-icon-library/vue'; export default { components: { SearchIcon }, props: ['label'] }; </script> 

Angular

• Use an Icon service or the library’s Angular module (if provided). For inline SVGs, bind innerHTML safely or use components.

Accessibility Best Practices

• Use role and aria attributes correctly. For decorative icons, set aria-hidden=“true” or role=“presentation”.
• For meaningful icons that convey action or status, provide an accessible name via aria-label, aria-labelledby, or screen-reader-only text.
• Ensure focusability: icons inside interactive controls should not receive separate tab stops; the control should be focusable, not the SVG itself.
• Maintain sufficient contrast when icons convey information.

Examples:

<!-- Decorative --> <svg aria-hidden="true" focusable="false">...</svg> <!-- Functional --> <button aria-label="Close">   <svg role="img"><title id="close-title">Close</title><use xlink:href="#close"/></svg> </button> 

Styling & Theming

• Change color with fill/currentColor pattern:

  <svg fill="none" stroke="currentColor" ...></svg> 

  Then set color in CSS:

  .icon { color: #1f2937; } /* dark gray */ .icon--danger { color: #dc2626; } /* red */ 

• Size with width/height attributes, CSS font-size, or transform scale.

• Add effects (hover, active) using CSS:

  .button .paper-icon { transition: transform .15s ease; } .button:hover .paper-icon { transform: translateY(-1px); } 

Customization & Extending

• Edit SVG paths for brand-specific shapes.
• Create custom components that wrap icons with standard props (size, color, title).
• Combine icons with badges or counters using absolute positioning inside relative containers.

Example wrapper (JS/TS):

export function Icon({name, size=16, className='', title}) {   const Comp = ICONS[name];   return <Comp width={size} height={size} className={className} aria-label={title} role={title ? 'img' : 'presentation'} />; } 

Performance & Optimization

• Prefer inline SVG for fewer HTTP requests when using a small number of icons.
• Use a sprite or icon font for many icons to reduce requests.
• Minify SVGs (svgo) to remove metadata and reduce size.
• Tree-shake unused icons when using component libraries with modern bundlers (import specific icons).
• Cache sprite files with long-lived HTTP cache headers.
• Defer loading icon fonts or large sprite files if they block initial render—use placeholders for critical UX.

Build Tooling & Automation

• Use SVGO for minification.
• Use icon build tools (svg-sprite, svgstore) to generate sprites.
• Automate React/Vue component generation with tools like @svgr/cli.
• Add a lint rule to ensure icons include aria attributes or aria-hidden when required.

Example SVGO config (simple):

{   "plugins": [     { "name": "removeViewBox", "active": false },     { "name": "removeDimensions", "active": true }   ] } 

Troubleshooting Common Issues

• Icon appears invisible: check fill/stroke and color inheritance (currentColor) and ensure CSS isn’t overriding.
• Icons blurry on mobile: ensure viewBox is present and width/height are integers or use CSS to size.
• Accessibility checkers flag icons: provide proper aria labels or aria-hidden attributes.
• Duplicate IDs in sprites: ensure IDs are namespaced during build.

Example Integration: Small React App

1. npm install paper-icon-library
2. Import CSS or icons:

   
   import 'paper-icon-library/dist/paper-icons.css'; import { MenuIcon, CloseIcon } from 'paper-icon-library/react'; 

3. Use in component:

   
   function Nav() { const [open, setOpen] = useState(false); return ( <button aria-label={open ? 'Close menu' : 'Open menu'} onClick={() => setOpen(!open)}>   {open ? <CloseIcon width={24} height={24} /> : <MenuIcon width={24} height={24} />} </button> ); } 

When Not to Use an Icon Library

• If you need highly unique, brand-specific icons everywhere—creating a bespoke set may be better.
• If your project cannot accept additional dependencies and you use only one tiny icon, an inline SVG might suffice.

Summary

• Choose installation method based on project needs (CDN, npm, inline, sprite).
• Prioritize accessibility (aria-hidden for decorative, aria-label for functional).
• Style icons with currentColor for easy theming.
• Optimize with SVGO, sprites, and tree-shaking.
• Wrap icons in small components for uniform props and behavior.

This should give you a clear path to integrate Paper Icon Library into web or mobile projects with best practices around accessibility, performance, and maintainability.