Icon Library Skill

Provides icons from the Azion Icon Library with context-aware output formats.

CRITICAL: Icon Font Availability

ai-* Azion Icons - ALWAYS USE SVG

The Azion icon font (azionicons.woff2) is NOT loaded by default in most contexts.

<i class="ai ai-application"></i> will NOT render unless the target project explicitly loads:

• The azionicons.woff2 font file
• The CSS with @font-face and class definitions

For ai-* icons: ALWAYS provide inline SVG from assets/svg/.

pi-* PrimeIcons - Font classes usually work

PrimeIcons are loaded automatically in projects using PrimeVue/PrimeReact.

<i class="pi pi-home"></i> works in most Vue/React projects with PrimeVue.

Icon Prefixes

• ai-* - Azion-specific icons → USE SVG (font rarely available)
• pi-* - PrimeIcons → Font class OK if PrimeVue is loaded, otherwise use SVG

Integration Approaches

1. SVG Approach (Recommended - Always Works)

Use for: ALL ai-* icons, and pi-* when unsure about font availability.

• Read SVG from assets/svg/{icon-name}.svg
• Copy/paste inline or reference as image
• Works anywhere, no setup required
• Supports multi-color icons

2. Icon Font Approach (Limited Use)

Use ONLY for pi-* icons in projects with PrimeVue/PrimeReact.

NEVER use <i class="ai ai-*"> unless you've verified the Azion font is loaded.

Setting Up Azion Icon Font (Optional)

If you want <i class="ai ai-*"> to work in your project, you need:

Step 1: Copy font file

Copy azionicons.woff2 to your project's assets folder.

Step 2: Create CSS file (azionicons.css)

css
1@font-face {
2  font-family: 'azionicons';
3  src: url('./azionicons.woff2') format('woff2');
4}
5
6.ai {
7  font-family: 'azionicons';
8  speak: none;
9  font-style: normal;
10  font-weight: normal;
11  font-variant: normal;
12  text-transform: none;
13  line-height: 1;
14  display: inline-block;
15  -webkit-font-smoothing: antialiased;
16  -moz-osx-font-smoothing: grayscale;
17}
18
19/* Icon class definitions */
20.ai.ai-application::before { content: '\ea08'; }
21.ai.ai-firewall::before { content: '\ea11'; }
22.ai.ai-functions::before { content: '\ea22'; }
23.ai.ai-storage::before { content: '\ea28'; }
24.ai.ai-sql::before { content: '\ea29'; }
25.ai.ai-kv::before { content: '\ea30'; }
26.ai.ai-orchestrator::before { content: '\ea31'; }
27.ai.ai-certificate-manager::before { content: '\ea24'; }
28.ai.ai-network-shield::before { content: '\ea25'; }
29/* See icons.scss for complete list */

Step 3: Import CSS globally

js
1// In main.js, App.vue, or _app.tsx
2import './assets/azionicons.css';

Step 4: Use icon classes

html
1<i class="ai ai-application"></i>

Note: The complete icons.scss with all icon mappings is available in the icon-library-visualization repository.

Finding Icons

Search references/icons-catalog.json by keyword:

grep -i "security\|firewall" references/icons-catalog.json

Each icon has: name, icon (class), and keywords.

Output Formats by Context

1. Website/App (HTML/Vue/React)

If project has icon font setup:

html
1<i class="ai ai-application"></i>

If no icon font (use SVG - recommended):

html
1<svg width="24" height="24" viewBox="0 0 24 24">
2  <path d="..." fill="currentColor"/>
3</svg>

Read the SVG content from assets/svg/{icon-name}.svg.

2. Content Marketing (Blog/Social/Email)

Always use inline SVG (no dependencies):

html
1<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
2  <path d="..." fill="#F3652B"/>
3</svg>

To customize color, replace fill attribute value.

3. Documentation (Markdown/MDX)

Markdown (image reference):

markdown
1![Application Icon](./path/to/ai-application.svg)

MDX (inline SVG):

mdx
1<svg width="24" height="24">...</svg>

4. CMS/Struct Fields

Provide just the icon name:

ai-application

Decision Logic

Common Icons Quick Reference

Azion Products

Note: Product names have been updated. Use the new names in content:

Frameworks

• ai-react - React
• ai-vue - Vue
• ai-nextjs - Next.js
• ai-astro - Astro
• ai-terraform - Terraform

UI Elements (pi-*)

• pi-home - Home
• pi-search - Search
• pi-user - User
• pi-cog - Settings
• pi-check - Check/Success
• pi-times - Close/Error
• pi-plus - Add
• pi-trash - Delete

Retrieving SVG Content

To get the full SVG markup, read from assets/svg/{icon-name}.svg.

Example workflow:

1. User asks for "firewall icon for blog post"
2. Search catalog: find ai-firewall
3. Read assets/svg/ai-firewall.svg
4. Return inline SVG with appropriate color

Naming Guidelines

Important: Follow these naming conventions in all content:

• Use AI (not IA) as the abbreviation for Artificial Intelligence
• Use distributed architecture instead of "at the edge" or "on the edge"
• Use the updated product names shown in the Azion Products table above

Product Name Mapping (Legacy → Current)