@simplybusiness/icons 4.39.0 → 4.40.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 4.40.0
+
+### Minor Changes
+
+- 51f1d36: Add arrowRight icon from FontAwesome Sharp Regular
+- 51f1d36: Add arrowRotateRight icon from FontAwesome Sharp Regular
+- 51f1d36: Add arrowsRotate icon from FontAwesome Sharp Regular
+- 51f1d36: Add ban icon from FontAwesome Sharp Regular
+- 51f1d36: Add bars icon from FontAwesome Sharp Regular
+- 51f1d36: Add circleCheck icon from FontAwesome Sharp Regular
+- 51f1d36: Add circleExclamation icon from FontAwesome Sharp Regular
+- fc346a2: Add icon font generation to produce woff2 font from icon definitions
+  - Generates mobius-icons.woff2 font file
+  - Generates CSS with .icon-\* classes (Icomoon-compatible)
+  - Generates SCSS with %icon-\* placeholders for @extend usage
+  - Includes backwards-compatible aliases for bijou icon names
+  - Adds HTML preview page for visual verification
+
+- 51f1d36: Add magnifyingGlassPlus icon from FontAwesome Sharp Regular
+- 51f1d36: Add phone icon from FontAwesome Sharp Regular
+- 51f1d36: Add sort icon from FontAwesome Sharp Regular
+- 51f1d36: Add spinnerThird icon from FontAwesome Sharp Regular
+- 51f1d36: Add squareCheck icon from FontAwesome Sharp Regular
+- 51f1d36: Add triangleExclamation icon from FontAwesome Sharp Regular
+- 51f1d36: Add userBountyHunter icon from FontAwesome Sharp Regular
+
 ## 4.39.0
 
 ### Minor Changes

package/README.md

@@ -0,0 +1,143 @@
+# @simplybusiness/icons
+
+Simply Business icon library for use in React applications and as an icon font.
+
+## Installation
+
+```bash
+yarn add @simplybusiness/icons
+```
+
+## Usage
+
+### React Components (Recommended)
+
+Use the `Icon` component from `@simplybusiness/mobius` with icon definitions from this package:
+
+```tsx
+import { Icon } from '@simplybusiness/mobius';
+import { tick, bell, chevronDown } from '@simplybusiness/icons';
+
+// Basic usage
+<Icon icon={tick} />
+
+// With size (xs, sm, md, lg)
+<Icon icon={bell} size="md" />
+
+// With custom color
+<Icon icon={chevronDown} color="#0066cc" />
+
+// With animation
+<Icon icon={loading} spin />
+
+// Fixed width (useful for alignment in lists)
+<Icon icon={tick} fixedWidth />
+
+// Custom accessibility title
+<Icon icon={bell} title="Notifications" />
+```
+
+#### Icon Component Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `IconDefinition` | required | Icon definition from `@simplybusiness/icons` |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'xs'` | Icon size |
+| `color` | `string` | inherited | Icon color (CSS color value) |
+| `fixedWidth` | `boolean` | `false` | Fixed width for alignment |
+| `spin` | `boolean` | `false` | Spinning animation |
+| `spinReverse` | `boolean` | `false` | Reverse spinning animation |
+| `title` | `string` | auto-generated | Accessibility title |
+| `className` | `string` | - | Additional CSS classes |
+
+### Icon Font
+
+For non-React environments (Rails/HAML, emails, legacy apps), use the icon font:
+
+#### CSS Import
+
+```css
+@import '@simplybusiness/icons/iconfont';
+```
+
+```html
+<i class="icon-tick"></i>
+<i class="icon-bell"></i>
+<i class="icon-chevron-down"></i>
+```
+
+#### SCSS with Placeholders
+
+For SCSS projects using `@extend`:
+
+```scss
+@import '@simplybusiness/icons/iconfont/scss';
+
+.my-success-indicator:before {
+  @extend %icon-tick;
+}
+
+.my-button-icon:before {
+  @extend %icon-chevron-right;
+}
+```
+
+#### Direct Font Import
+
+```scss
+// Import just the font file
+@font-face {
+  font-family: 'mobius-icons';
+  src: url('~@simplybusiness/icons/iconfont/font') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+```
+
+### Available Exports
+
+| Export | Description |
+|--------|-------------|
+| `@simplybusiness/icons` | Icon definitions for React |
+| `@simplybusiness/icons/iconfont` | CSS file with icon classes |
+| `@simplybusiness/icons/iconfont/css` | CSS file (explicit) |
+| `@simplybusiness/icons/iconfont/scss` | SCSS with `%icon-*` placeholders |
+| `@simplybusiness/icons/iconfont/font` | woff2 font file |
+
+## Backwards Compatibility
+
+For projects migrating from bijou/Icomoon, these aliases are available:
+
+| Alias | Maps to |
+|-------|---------|
+| `icon-cta-arrow` | `icon-right-arrow` |
+| `icon-button-arrow-left` | `icon-left-arrow` |
+| `icon-button-arrow-right` | `icon-right-arrow` |
+| `icon-info` | `icon-circle-info` |
+| `icon-phone` | `icon-telephone` |
+| `icon-close` | `icon-cross` |
+| `icon-chevron-up-2` | `icon-chevron-up` |
+| `icon-chevron-down-2` | `icon-chevron-down` |
+
+## Available Icons
+
+Run `yarn workspace @simplybusiness/icons build:iconfont` and open `dist/iconfont/index.html` for a visual preview of all available icons.
+
+## Adding New Icons
+
+1. Add the icon definition file in `src/` following the `IconDefinition` type
+2. Export it from `src/icons.tsx`
+3. Run `yarn workspace @simplybusiness/icons build`
+
+## Development
+
+```bash
+# Build all outputs (React + icon font)
+yarn workspace @simplybusiness/icons build
+
+# Build just the icon font
+yarn workspace @simplybusiness/icons build:iconfont
+
+# Type check
+yarn workspace @simplybusiness/icons check-types
+```