Icons

pm7-ui currently provides a single, versatile hamburger menu icon, designed for consistent navigation across applications. More icons are planned for future releases.

When to use

• For consistent menu triggers across PM7 applications
• When you need a recognizable hamburger menu icon
• To maintain brand consistency in navigation
• For responsive mobile menu toggles

Key features

• Framework agnostic - Works with any JavaScript framework or vanilla JS
• Multiple formats - DOM element, HTML string, or data URI
• Customizable - Size and color options
• Optimized - Minimal SVG with clean code
• Accessible - Proper ARIA attributes included
• Consistent - Matches PM7 design language

Icon Specifications

The hamburger menu icon features:

• Default dimensions: 18×15 pixels
• Bar height: 2.5 pixels
• Bar spacing: 3.75 pixels between bars
• Corner radius: 1.25 pixels (rounded bars)
• Color: Inherits from currentColor by default

Installation

npm install @pm7/core

CSS Classes

The icon components don't have specific CSS classes. They are pure SVG elements that inherit styling from their parent elements or can be styled directly with inline styles or custom classes.

Data Attributes

Icons do not use any special data attributes. They are generated as SVG elements with standard attributes.

Import Methods

// ES6 import
import { createHamburgerIconElement, createHamburgerIcon, getHamburgerIconDataURI } from '@pm7/core';

// CommonJS
const { createHamburgerIconElement } = require('@pm7/core');

// Via CDN
<script src="https://unpkg.com/@pm7/core"></script>

Usage Examples

Create DOM Element

import { createHamburgerIconElement } from '@pm7/core';

// Default icon
const icon = createHamburgerIconElement();
document.getElementById('menu-trigger').appendChild(icon);

// Custom size and color
const customIcon = createHamburgerIconElement({
  width: 24,
  height: 20,
  color: '#1C86EF',
  className: 'menu-icon'
});

Get HTML String

import { createHamburgerIcon } from '@pm7/core';

// Get icon as HTML string
const iconHTML = createHamburgerIcon({
  className: 'my-hamburger-icon'
});

// Use in template
const button = `
  <button class="pm7-button">
    ${iconHTML}
    <span>Menu</span>
  </button>
`;

Use as CSS Background

import { getHamburgerIconDataURI } from '@pm7/core';

// Get data URI
const dataURI = getHamburgerIconDataURI('%231C86EF');

// Apply to element
button.style.backgroundImage = `url(${dataURI})`;

// Or use in CSS
const style = `
  .menu-button::before {
    background-image: url(${dataURI});
  }
`;

JavaScript API

React Usage

import { HamburgerIcon } from '@pm7/react';

function MenuButton() {
  return (
    <button className="pm7-button pm7-button--ghost">
      <HamburgerIcon width={16} height={13} />
      <span>Menu</span>
    </button>
  );
}

Vue Usage

<template>
  <button class="pm7-button pm7-button--ghost">
    <hamburger-icon :width="16" :height="13" />
    <span>Menu</span>
  </button>
</template>

<script>
import { HamburgerIcon } from '@pm7/vue';

export default {
  components: { HamburgerIcon }
}
</script>

Accessibility

• Icons are decorative by default (aria-hidden="true")
• When used as buttons, provide proper aria-label attributes
• Consider adding visible text labels for better accessibility
• Use sufficient color contrast for icon visibility
• Ensure clickable areas meet minimum size requirements (44×44px)

Copy this link that can be used as documentation for working with this component: