Icon Assets

interface SVGAssets {
  'svgs/solid/': string[];   // 1,984 solid weight SVG files
  'svgs/regular/': string[]; // 273 regular weight SVG files
  'svgs/brands/': string[];  // 549 brand SVG files
}

svgs/
├── solid/
│   ├── user.svg
│   ├── home.svg
│   ├── heart.svg
│   └── ... (1,984 total)
├── regular/
│   ├── user.svg
│   ├── heart.svg
│   ├── file.svg
│   └── ... (273 total)
└── brands/
    ├── github.svg
    ├── twitter.svg
    ├── facebook.svg
    └── ... (549 total)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 WIDTH HEIGHT">
  <path d="SVG_PATH_DATA"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.3 304H178.3z"/>
</svg>

// Import individual SVG files
import userIcon from '@fortawesome/fontawesome-free/svgs/solid/user.svg';
import heartIcon from '@fortawesome/fontawesome-free/svgs/regular/heart.svg';

// Use with svg-inline-loader
const iconSvg = require('!!svg-inline-loader!@fortawesome/fontawesome-free/svgs/solid/home.svg');

// Direct SVG import (with proper loader configuration)
import { ReactComponent as UserIcon } from '@fortawesome/fontawesome-free/svgs/solid/user.svg';

function MyComponent() {
  return <UserIcon className="icon" />;
}

interface SpriteAssets {
  'sprites/solid.svg': string;        // Optimized solid icons sprite
  'sprites/regular.svg': string;      // Optimized regular icons sprite  
  'sprites/brands.svg': string;       // Optimized brand icons sprite
  'sprites-full/solid.svg': string;   // Complete solid icons sprite
  'sprites-full/regular.svg': string; // Complete regular icons sprite
  'sprites-full/brands.svg': string;  // Complete brand icons sprite
}

<svg class="icon">
  <use href="/path/to/sprites/solid.svg#user"></use>
</svg>

<svg class="icon">
  <use href="/path/to/sprites/brands.svg#github"></use>
</svg>

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

interface WebFontAssets {
  'webfonts/fa-solid-900.woff2': ArrayBuffer;   // Solid icons (WOFF2)
  'webfonts/fa-solid-900.woff': ArrayBuffer;    // Solid icons (WOFF)
  'webfonts/fa-solid-900.ttf': ArrayBuffer;     // Solid icons (TTF)
  'webfonts/fa-regular-400.woff2': ArrayBuffer; // Regular icons (WOFF2)
  'webfonts/fa-regular-400.woff': ArrayBuffer;  // Regular icons (WOFF)
  'webfonts/fa-regular-400.ttf': ArrayBuffer;   // Regular icons (TTF)
  'webfonts/fa-brands-400.woff2': ArrayBuffer;  // Brand icons (WOFF2)
  'webfonts/fa-brands-400.woff': ArrayBuffer;   // Brand icons (WOFF)
  'webfonts/fa-brands-400.ttf': ArrayBuffer;    // Brand icons (TTF)
}

@font-face {
  font-family: 'Font Awesome 7 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('../webfonts/fa-solid-900.woff2') format('woff2'),
       url('../webfonts/fa-solid-900.woff') format('woff'),
       url('../webfonts/fa-solid-900.ttf') format('truetype');
}

@font-face {
  font-family: 'Font Awesome 7 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../webfonts/fa-regular-400.woff2') format('woff2'),
       url('../webfonts/fa-regular-400.woff') format('woff'),
       url('../webfonts/fa-regular-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Font Awesome 7 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../webfonts/fa-brands-400.woff2') format('woff2'),
       url('../webfonts/fa-brands-400.woff') format('woff'),
       url('../webfonts/fa-brands-400.ttf') format('truetype');
}

interface MetadataAssets {
  'metadata/icons.yml': IconMetadata;           // Complete icon metadata
  'metadata/categories.yml': CategoryMetadata;  // Icon categorization
  'metadata/icon-families.json': FamilyData;   // Icon family definitions
  'metadata/shims.yml': ShimData;              // Compatibility mappings
}

interface IconMetadata {
  [iconName: string]: {
    changes: string[];        // Version change history
    label: string;           // Display label
    search: {
      terms: string[];       // Search keywords
    };
    styles: string[];        // Available styles (solid, regular, brands)
    unicode: string;         // Unicode codepoint
    voted: boolean;         // Community voted status
  };
}

user:
  changes:
    - 1.0.0
    - 6.0.0
    - 7.0.0
  label: User
  search:
    terms:
      - person
      - profile
      - account
  styles:
    - solid
    - regular
  unicode: f007
  voted: false

interface CategoryMetadata {
  [categoryName: string]: {
    label: string;
    icons: string[];
  };
}

accessibility:
  label: Accessibility
  icons:
    - universal-access
    - wheelchair
    - blind
    - deaf
    - sign-language

business:
  label: Business
  icons:
    - briefcase
    - building
    - chart-line
    - handshake

// Add custom icon to FontAwesome library
FontAwesome.library.add({
  prefix: 'fac', // custom prefix
  iconName: 'my-custom-icon',
  icon: [
    512,        // width
    512,        // height
    [],         // ligatures
    'e001',     // unicode
    'M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z' // SVG path
  ]
});

// Process individual SVG files
import fs from 'fs';
import path from 'path';

function loadSvgIcon(iconPath) {
  const svgContent = fs.readFileSync(iconPath, 'utf8');
  const viewBoxMatch = svgContent.match(/viewBox="([^"]+)"/);
  const pathMatch = svgContent.match(/<path[^>]*d="([^"]+)"/);
  
  if (viewBoxMatch && pathMatch) {
    const [, , , width, height] = viewBoxMatch[1].split(' ');
    return {
      width: parseInt(width),
      height: parseInt(height),
      pathData: pathMatch[1]
    };
  }
}

// Usage
const userIcon = loadSvgIcon('@fortawesome/fontawesome-free/svgs/solid/user.svg');

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        include: /@fortawesome\/fontawesome-free\/svgs/,
        use: [
          {
            loader: 'svg-inline-loader',
            options: {
              removeTags: true,
              removingTags: ['title', 'desc'],
              removeSVGTagAttrs: false
            }
          }
        ]
      },
      {
        test: /\.(woff2?|ttf|eot)$/,
        include: /@fortawesome\/fontawesome-free\/webfonts/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]'
          }
        }
      }
    ]
  }
};

// rollup.config.js
import { string } from 'rollup-plugin-string';

export default {
  plugins: [
    string({
      include: '**/*.svg'
    })
  ]
};

// vite.config.js
export default {
  assetsInclude: ['**/*.svg'],
  optimizeDeps: {
    exclude: ['@fortawesome/fontawesome-free']
  }
};

// Create custom icon subset
const requiredIcons = [
  'user', 'home', 'heart', 'search', 'envelope'
];

// Generate subset CSS
const subsetCSS = requiredIcons.map(icon => `
.fa-${icon}::before {
  content: "${getIconUnicode(icon)}";
}
`).join('\n');

// Lazy load icon assets
async function loadIconStyle(style) {
  const { default: icons } = await import(
    `@fortawesome/fontawesome-free/js/${style}.js`
  );
  return icons;
}

// Usage
const solidIcons = await loadIconStyle('solid');

// Service worker caching strategy
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/webfonts/')) {
    event.respondWith(
      caches.open('fa-fonts').then(cache => {
        return cache.match(event.request).then(response => {
          return response || fetch(event.request).then(fetchResponse => {
            cache.put(event.request, fetchResponse.clone());
            return fetchResponse;
          });
        });
      })
    );
  }
});