0.1.13 ā¢ Published 11 months ago
@airqoglyphs/css v0.1.13
@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
š¦ 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/css2. 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 arrowaq-arrow-left- Left arrowaq-arrow-up- Up arrowaq-arrow-down- Down arrowaq-chart-line- Line chartaq-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
::beforepseudo-elements - Web fonts (WOFF2/WOFF)
License
MIT Ā© AirQoGlyphs