Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@airqoglyphs/css

hyperion442648MIT0.1.13TypeScript support: included

Modern CSS icon library with excellent Tailwind compatibility using CSS mask properties

icons, css, svg, mask, tailwind, currentColor, framework-agnostic, self-contained, no-fonts, react, vue, angular, svelte

readme

@airqoglyphs/css

🚀 Revolutionary SVG-based CSS Icon Library - Zero setup, works everywhere, no font files needed!

✨ What Makes This Revolutionary?

Traditional icon fonts require:

  • ❌ Font file management
  • ❌ Bundler configuration
  • ❌ CORS handling
  • ❌ 404 error handling
  • ❌ Font loading delays

Our approach provides:

  • ✅ Zero configuration - Just import and use
  • ✅ Self-contained CSS - No external files
  • ✅ Universal compatibility - Works with any framework
  • ✅ Instant loading - No font downloads
  • ✅ 141+ icons included - Growing library

npm version Bundle Size

📦 Super Simple Installation

npm install @airqoglyphs/css

🚀 Usage (Just 2 Steps!)

Step 1: Import CSS

import '@airqoglyphs/css';

Step 2: Use Icons

<i class="aq-arrow-block-down"></i>
<i class="aq-bar-chart-01"></i>
<i class="aq-arrow-circle-up"></i>

That's it! No font files, no configuration, no hassle.

npm install @airqoglyphs/css
# or
yarn add @airqoglyphs/css
# or
pnpm add @airqoglyphs/css

2. Import (choose your framework)

React / Next.js:

// In your _app.js, layout.js, or main component
import '@airqoglyphs/css';

Vue:

// In your main.js
import '@airqoglyphs/css';

Vanilla HTML:

<!-- In your HTML head -->
<link rel="stylesheet" href="node_modules/@airqoglyphs/css/dist/airqoglyphs.css" />

CSS/SCSS:

/* In your main CSS file */
@import '@airqoglyphs/css/airqoglyphs.css';

3. Use Icons

<!-- Basic usage -->
<i class="aq-arrow-right"></i>
<i class="aq-chevron-down"></i>
<i class="aq-bar-chart-01"></i>

<!-- With custom styling -->
<i class="aq-arrow-right" style="font-size: 32px; color: blue;"></i>

<!-- In buttons -->
<button>
  <i class="aq-arrow-left"></i>
  Back
</button>

<!-- With CSS classes -->
<i class="aq-chart-line large-icon text-primary"></i>

Troubleshooting Font Loading Issues

If you're facing issues with the font files not loading properly, try one of these solutions:

Option 1: Copy Font Files to Your Public Directory

For frameworks like Next.js or other static site generators, copy the font files to your public directory:

# Create fonts directory if it doesn't exist
mkdir -p public/fonts

# Copy font files
cp -r node_modules/@airqoglyphs/css/dist/fonts/* public/fonts/

Then update the CSS to reference the fonts from the public path:

/* In your global CSS */
@font-face {
  font-family: 'AirQoGlyphs';
  src:
    url('/fonts/airqoglyphs.woff2') format('woff2'),
    url('/fonts/airqoglyphs.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Option 2: Configure Your Bundler

For webpack:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2)$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]',
        },
      },
    ],
  },
};

For Next.js:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: config => {
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
    });
    return config;
  },
};

module.exports = nextConfig;

For Vite:

// vite.config.js
export default {
  assetsInclude: ['**/*.woff', '**/*.woff2'],
};

Icon Naming Convention

All icons use the aq- prefix followed by the icon name:

  • aq-arrow-right - Right arrow
  • aq-arrow-left - Left arrow
  • aq-arrow-up - Up arrow
  • aq-arrow-down - Down arrow
  • aq-chart-line - Line chart
  • aq-chart-bar - Bar chart

Framework Examples

Vanilla HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="path/to/airqoglyphs.css" />
  </head>
  <body>
    <i class="aq-arrow-right"></i>
  </body>
</html>

Vue.js

<template>
  <div>
    <i class="aq-arrow-right"></i>
    <i :class="`aq-${iconName}`"></i>
  </div>
</template>

Angular

<i class="aq-arrow-right"></i> <i [class]="'aq-' + iconName"></i>

Svelte

<i class="aq-arrow-right"></i>
<i class="aq-{iconName}"></i>

Available Icons

Icons are organized into categories:

  • Arrows: Directional arrows in various styles
  • Charts: Business and data visualization icons

Browser Support

Works in all modern browsers that support:

  • CSS ::before pseudo-elements
  • Web fonts (WOFF2/WOFF)

License

MIT © AirQoGlyphs