Onebit Icons Documentation

Recent Improvements

We've made significant enhancements to the icon library to improve usability and fix alignment issues:

Better Scaling: Removed hardcoded width/height attributes from SVG files while preserving viewBox for proper scaling
Consistent API: Implemented a wrapper around SVG icons that provides consistent sizing via the size prop
Color Inheritance: Icons now properly inherit colors from parent elements via currentColor
Better Alignment: Improved vertical alignment and display properties for consistent positioning
Accessibility: Enhanced aria attributes for better screen reader support

Check out our test page to see these improvements in action.

Installation

Install the core metadata and React components via npm or yarn:

npm install onebit-icon-react

yarn add onebit-icon-react

Usage

Onebit Icons are easy to use in React, HTML, or as inline SVGs. Import the icon you need and use it as a component, or copy the SVG/HTML as needed.

Usage Examples

React Component

Import and render any icon as a React component:

import { OnebitHome } from 'onebit-icon-react';

function App() {
  // Basic usage with default size (1em)
  return <OnebitHome />;
}

Setting Icon Size

Control icon size using the size prop or other methods:

// Using the size prop (sets both width and height)
<OnebitHome size={24} />

// Using width and height props
<OnebitHome width={24} height={24} />

// Using style
<OnebitHome style={{ width: '24px', height: '24px' }} />

// Using Tailwind classes
<OnebitHome className="w-6 h-6" />

Setting Icon Color

Set icon colors using CSS classes or inline styles:

// Using className with Tailwind CSS
<OnebitHome className="text-blue-500" />

// Using inline style
<OnebitHome style={{ color: '#0088ff' }} />

// Color inheritance from parent
<div style={{ color: 'red' }}>
  <OnebitHome /> {/* This icon will be red */}
</div>

HTML/CSS

Use the CSS classes to display icons via <i> tags:

<!-- include the CSS file -->
<link rel="stylesheet" href="https://unpkg.com/onebit-icon-font@1.2.1/build/onebit-icon.css" />

<!-- use the icon -->
<i class="onebit-Home" style="font-size: 24px; color: #4F46E5;"></i>

Inline SVG

Copy SVG markup from the source and include directly:

<!-- SVGs now use viewBox and currentColor for better scaling and coloring -->
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
  <!-- ...paths... -->
</svg>

Examples Gallery

Check out our examples gallery to see various icon sizes and coloring techniques in action.

Best Practices

Use the size prop for consistent sizing
Use semantic classes or theme colors for icon colors
Add aria-label for non-decorative icons
Use relative units (em or rem) for responsive designs

Advanced Usage

Contributing

Want to contribute new icons or improvements? We welcome contributions from the community!

Visit our GitHub repository to:

Submit new icon designs
Report bugs or issues
Request new features
View contribution guidelines

<!-- All icons follow this format for consistency -->
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>

Combining with Other Libraries

Onebit Icons work well with UI component libraries. Here's an example with Tailwind CSS:

import { OnebitHome, OnebitMenuIcon } from 'onebit-icon-react';

const Header = () => (
  <header className="flex items-center justify-between p-4 bg-white shadow">
    <div className="flex items-center space-x-4">
      <OnebitMenuIcon className="text-gray-700" size={24} />
      <h1 className="text-xl font-semibold">Dashboard</h1>
    </div>
    
    <button className="flex items-center px-4 py-2 rounded bg-blue-600 text-white">
      <OnebitHome size={16} className="mr-2" />
      <span>Go Home</span>
    </button>
  </header>
);

Animating Icons

You can apply CSS animations to icons for interactive effects:

/* CSS animation example */
.spinning-icon {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Usage in React */
<OnebitHomeIcon size={24} className="spinning-icon text-blue-500" />

/* Hover effects */
.icon-hover {
  transition: transform 0.2s ease;
}

.icon-hover:hover {
  transform: scale(1.1);
}

Troubleshooting

Icons not displaying correctly?

Make sure you've imported the icon correctly from the package
Check that your bundler supports React components if using the React package
Verify the icon name matches exactly (case-sensitive)

SVG styling issues?

Ensure your CSS doesn't override icon styles unintentionally
Use the size prop for consistent sizing
Remember that icons inherit color from their parent element

Need help?

Visit our GitHub Issues page to report bugs or ask questions. We're here to help!