### Install NPM Dependencies

Source: https://github.com/devicons/devicon/blob/master/README.md

Install all required Node Package Manager (NPM) dependencies for building Devicon. Ensure Node.js and NPM are installed.

```bash
npm install
```

--------------------------------

### Redhat Icon Entry Example

Source: https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md

An example of how to structure the JSON entry for the Redhat icon, including its name, tags, and available SVG versions.

```json
{
  "name": "redhat",
  "tags": [
    "server",
    "linux"
  ],
  "versions": {
    "SVG": [
      "original",

```

--------------------------------

### Starting Python HTTP Server

Source: https://context7.com/devicons/devicon/llms.txt

Alternative command to start a simple HTTP server using Python, useful for serving local files on a specified port.

```bash
# Alternative: Start server with custom port
python -m http.server 3000
```

--------------------------------

### Start Devicon Web Server (Python)

Source: https://github.com/devicons/devicon/blob/master/README.md

Start a local web server using Python's http.server module. The port can be customized.

```bash
python -m http.server <port>
```

--------------------------------

### Start Devicon Web Server (NPM)

Source: https://github.com/devicons/devicon/blob/master/README.md

Start the local development web server using NPM. This command typically runs on port 8000.

```bash
npm run dev
```

--------------------------------

### Install Devicon with npm or yarn

Source: https://github.com/devicons/devicon/blob/master/README.md

Install Devicon as a project dependency using either npm or yarn.

```bash
npm install --save devicon
yarn add devicon
```

--------------------------------

### Installing Node.js Dependencies

Source: https://context7.com/devicons/devicon/llms.txt

Command to install the necessary Node.js packages for Devicon development using npm.

```bash
# Install Node.js dependencies
npm install
```

--------------------------------

### Install Python Dependencies

Source: https://github.com/devicons/devicon/blob/master/README.md

Install Python dependencies required for building Devicon. This command uses pip to install packages listed in the requirements file. Ensure Python 3.8+ and pip are installed.

```bash
python -m pip install -r ./.github/scripts/requirements.txt
```

--------------------------------

### Starting Devicon Local Development Server

Source: https://context7.com/devicons/devicon/llms.txt

Command to start the local development server for Devicon, typically opening a browser to http://localhost:8000. Requires Node.js.

```bash
# Start local development server
npm run dev
# Opens browser at http://localhost:8000
```

--------------------------------

### Installing Python Dependencies

Source: https://context7.com/devicons/devicon/llms.txt

Command to install Python dependencies required for Devicon's build scripts, using pip.

```bash
# Install Python dependencies
python -m pip install -r ./.github/scripts/requirements.txt
```

--------------------------------

### HTML Example with Devicon CSS

Source: https://context7.com/devicons/devicon/llms.txt

Illustrates how to apply Devicon CSS classes directly in HTML for various styling effects, including grayscale, spinning animations, and custom layouts.

```html
<!-- Using the CSS classes -->
<div class="icon-grid">
  <div class="icon-grid-item">
    <i class="devicon-react-original colored"></i>
    <span>React</span>
  </div>
  <div class="icon-grid-item icon-grayscale">
    <i class="devicon-vuejs-plain colored"></i>
    <span>Vue.js</span>
  </div>
  <div class="icon-circle">
    <i class="devicon-nodejs-plain"></i>
  </div>
  <i class="devicon-docker-plain icon-spinning" style="font-size: 48px;"></i>
</div>

```

--------------------------------

### Include Devicon CSS in HTML

Source: https://context7.com/devicons/devicon/llms.txt

Include the Devicon minified CSS file in your HTML's head section to enable the icon font. This can be done using a local path after installation or via a CDN link for quick setup.

```html
<!-- Include in your HTML head after installation -->
<link rel="stylesheet" href="node_modules/devicon/devicon.min.css">

<!-- Alternative: Use CDN for quick setup (no installation needed) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
```

--------------------------------

### Include Devicon Stylesheet

Source: https://github.com/devicons/devicon/blob/master/README.md

Link the Devicon CSS file in your HTML header to start using the icons.

```html
<link rel="stylesheet" href="devicon.min.css">
```

--------------------------------

### Example of Aliases Array

Source: https://github.com/devicons/devicon/wiki/Updating-`devicon.json`

This example demonstrates how to use the 'aliases' array to map an 'original' SVG version to a 'plain' alias. This allows the same icon to be accessed with different class names, such as .apple-original and .apple-plain.

```javascript
"aliases": [ // `aliases` is an array of objects
  {
    "base": "original", // the SVG file we are using as source for the alias
    "alias": "plain" // the new name (alias) that we want to generate
  }
]
```

--------------------------------

### Devicon CSS Styling

Source: https://context7.com/devicons/devicon/llms.txt

Provides CSS examples for styling Devicon icons, including basic styling, hover effects, animations, and layout for icon grids. Suitable for advanced customization.

```css
/* Basic font icon styling */
.devicon-custom {
  font-size: 32px;
  color: #333;
  transition: all 0.3s ease;
}

.devicon-custom:hover {
  color: #007bff;
  transform: scale(1.2);
}

/* Grayscale to color on hover */
.icon-grayscale {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.icon-grayscale:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Spinning animation for loading states */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-spinning {
  animation: spin 2s linear infinite;
}

/* Icon with background circle */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 28px;
}

/* Icon grid layout */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 24px;
  padding: 24px;
}

.icon-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: box-shadow 0.3s ease;
}

.icon-grid-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.icon-grid-item i {
  font-size: 40px;
  margin-bottom: 8px;
}

/* SVG-specific styling */
.svg-icon {
  width: 48px;
  height: 48px;
  fill: currentColor;
}

.svg-icon path {
  transition: fill 0.3s ease;
}

.svg-icon:hover path {
  fill: #61dafb;
}

```

--------------------------------

### Devicon Icon Naming Convention Breakdown

Source: https://context7.com/devicons/devicon/llms.txt

Illustrates the structure for CSS classes and SVG file paths, along with available version types for Devicon icons. Also shows examples of technology name transformations.

```javascript
const iconPattern = {
  // CSS class format: devicon-{technology}-{version}
  cssClass: "devicon-react-original",

  // SVG file path format: icons/{technology}/{technology}-{version}.svg
  svgPath: "icons/react/react-original.svg",

  // Available versions:
  versions: {
    "original": "Full color logo as designed",
    "original-wordmark": "Full color with technology name",
    "plain": "Single color version",
    "plain-wordmark": "Single color with technology name",
    "line": "Outline/stroke version",
    "line-wordmark": "Outline with technology name"
  }
};

// Examples of technology name transformations:
const nameExamples = {
  "AngularJS": "angularjs",
  "Node.js": "nodejs",
  "Amazon Web Services": "amazonwebservices",
  "Microsoft SQL Server": "microsoftsqlserver",
  "C++": "cplusplus",
  "C#": "csharp",
  "Vue.js": "vuejs"
};
```

--------------------------------

### Common Devicon Font Icons

Source: https://context7.com/devicons/devicon/llms.txt

Examples of common technology icons available in the Devicon library, including web development, version control, databases, and cloud services.

```html
<!-- Common technology icons -->
<i class="devicon-html5-plain colored"></i>
<i class="devicon-css3-plain colored"></i>
<i class="devicon-git-plain colored"></i>
<i class="devicon-vscode-plain colored"></i>
<i class="devicon-postgresql-plain colored"></i>
<i class="devicon-mongodb-plain colored"></i>
<i class="devicon-aws-plain-wordmark colored"></i>
<i class="devicon-kubernetes-plain colored"></i>
```

--------------------------------

### Programmatic Icon Class and URL Generation

Source: https://context7.com/devicons/devicon/llms.txt

Provides JavaScript functions to dynamically generate Devicon CSS classes and SVG URLs based on technology and version. Includes usage examples.

```javascript
// Constructing icon references programmatically
function getIconClass(technology, version = 'plain', colored = false) {
  const base = `devicon-${technology}-${version}`;
  return colored ? `${base} colored` : base;
}

function getIconSvgUrl(technology, version = 'original') {
  return `https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${technology}/${technology}-${version}.svg`;
}

// Usage examples
console.log(getIconClass('react', 'original', true));
// Output: "devicon-react-original colored"

console.log(getIconSvgUrl('python', 'plain-wordmark'));
// Output: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-plain-wordmark.svg"
```

--------------------------------

### Checkout and Create Branch

Source: https://github.com/devicons/devicon/wiki/Release-strategy,-conventions,-preparation-and-execution

Use these git commands to checkout the develop branch and create a new branch for drafting the release.

```shell
git checkout develop
git checkout -b draft-release
```

--------------------------------

### React Devicon Integration

Source: https://context7.com/devicons/devicon/llms.txt

Demonstrates how to use Devicon icons within a React application. Includes components for rendering icons using font classes or SVGs, and a sample tech stack display.

```jsx
import React from 'react';
// If using bundler, import the CSS
// import 'devicon/devicon.min.css';

// Simple icon component using font
const DevIcon = ({ name, version = 'plain', colored = false, size = 24 }) => {
  const className = `devicon-${name}-${version}${colored ? ' colored' : ''}`;
  return <i className={className} style={{ fontSize: size }} />;
};

// Icon component using SVG for more control
const DevIconSVG = ({ name, version = 'original', size = 48, className = '' }) => {
  const url = `https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${name}/${name}-${version}.svg`;
  return (
    <img
      src={url}
      alt={name}
      width={size}
      height={size}
      className={className}
    />
  );
};

// Tech stack display component
const TechStack = ({ technologies }) => (
  <div className="tech-stack" style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
    {technologies.map(tech => (
      <div key={tech.name} style={{ textAlign: 'center' }}>
        <DevIcon name={tech.name} version={tech.version} colored size={48} />
        <p style={{ margin: '8px 0 0', fontSize: '12px' }}>{tech.label}</p>
      </div>
    ))}
  </div>
);

// Example usage
function App() {
  const myStack = [
    { name: 'react', version: 'original', label: 'React' },
    { name: 'typescript', version: 'plain', label: 'TypeScript' },
    { name: 'nodejs', version: 'plain', label: 'Node.js' },
    { name: 'postgresql', version: 'plain', label: 'PostgreSQL' },
    { name: 'docker', version: 'plain', label: 'Docker' },
    { name: 'kubernetes', version: 'plain', label: 'K8s' },
  ];

  return (
    <div>
      <h2>My Tech Stack</h2>
      <TechStack technologies={myStack} />

      {/* Individual icons */}
      <DevIcon name="javascript" version="original" colored />
      <DevIconSVG name="python" size={64} />
    </div>
  );
}

export default App;

```

--------------------------------

### Building Devicon Icons

Source: https://context7.com/devicons/devicon/llms.txt

Command to generate font files from SVG icons using the npm script. This is part of the local build process.

```bash
# Build new icons (generates font files from SVGs)
npm run build-icons
```

--------------------------------

### Building Devicon CSS

Source: https://context7.com/devicons/devicon/llms.txt

Command to generate the Devicon CSS stylesheet using npm. This is necessary after updating icons or making CSS changes.

```bash
# Build CSS stylesheet
npm run build-css
```

--------------------------------

### Build Devicon CSS

Source: https://github.com/devicons/devicon/blob/master/README.md

Build the CSS stylesheet for Devicon. This file is used to display the newly built icons.

```bash
npm run build-css
```

--------------------------------

### Cloning Devicon Repository

Source: https://context7.com/devicons/devicon/llms.txt

Command to clone the Devicon GitHub repository locally. This is the first step for local development or customization.

```bash
# Clone the repository
git clone https://github.com/devicons/devicon.git
cd devicon
```

--------------------------------

### Clone Devicon Repository

Source: https://github.com/devicons/devicon/blob/master/README.md

Clone the Devicon repository to your local machine. Replace '<your-github-username>' with your actual GitHub username.

```bash
git clone https://github.com/<your-github-username>/devicon.git
```

--------------------------------

### Build Devicon Icons

Source: https://github.com/devicons/devicon/blob/master/README.md

Build the Devicon icons. This command generates the icon assets and is typically run during releases. The process may take some time.

```bash
npm run build-icons
```

--------------------------------

### Use Devicon Icon in HTML

Source: https://github.com/devicons/devicon/blob/master/README.md

Insert an HTML element with the appropriate Devicon class to display an icon. Replace 'devicon-devicon-plain' with the specific icon class you need.

```html
<i class="devicon-devicon-plain"></i>
```

--------------------------------

### Use Devicon Icons with <i> tag

Source: https://github.com/devicons/devicon/blob/master/README.md

Apply Devicon icons by adding specific classes to the <i> tag. Supports plain, wordmark, and colored versions.

```html
<!--  for devicon plain version -->
<i class="devicon-devicon-plain"></i>

<!--  for devicon plain version with wordmark -->
<i class="devicon-devicon-plain-wordmark"></i>

<!--  for devicon plain version colored with devicon main color -->
<i class="devicon-devicon-plain colored"></i>

<!--  for devicon plain version with wordmark colored with devicon main color -->
<i class="devicon-devicon-plain-wordmark colored"></i>
```

--------------------------------

### Basic Devicon Font Icon Usage

Source: https://context7.com/devicons/devicon/llms.txt

Display technology icons using `<i>` tags with Devicon CSS classes. Use the `colored` class to apply official brand colors.

```html
<!-- Basic icon usage -->
<i class="devicon-javascript-plain"></i>
<i class="devicon-python-plain"></i>
<i class="devicon-react-original"></i>

<!-- With wordmark (includes technology name) -->
<i class="devicon-nodejs-plain-wordmark"></i>
<i class="devicon-docker-plain-wordmark"></i>

<!-- Colored versions (applies brand colors) -->
<i class="devicon-typescript-plain colored"></i>
<i class="devicon-vuejs-plain colored"></i>
<i class="devicon-rust-plain colored"></i>
```

--------------------------------

### Update devicon.json for Redhat Icon

Source: https://github.com/devicons/devicon/wiki/Example-of-Submitting-Icons-to-the-Repository

This JSON object defines the metadata for the Redhat icon, including its name, tags, available SVG and font versions, and color. Ensure the 'color' field includes the '#' character.

```json
{
  "name": "redhat",
  "altnames": [], // alternative names for the icon
  "tags": [
    "server",
    "linux"
  ],
  "versions": {
    "svg": [ // here are the versions that are available in svgs
      "original",
      "original-wordmark",
      "plain",
      "plain-wordmark"
    ],
    "font": [
      "plain",
      "plain-wordmark"
    ]
  },
  "color": "#e93442", // note the '#' character
  "aliases": [] // no aliases in this case
}
```

--------------------------------

### Bump Package Version

Source: https://github.com/devicons/devicon/wiki/Release-strategy,-conventions,-preparation-and-execution

Command to bump the npm package version and commit the change with a descriptive message. Replace MAJOR.MINOR.PATCH with the actual version numbers.

```shell
npm version vMAJOR.MINOR.PATCH -m "bump npm version to vMAJOR.MINOR.PATCH"
```

--------------------------------

### Devicon JSON Entry Structure

Source: https://context7.com/devicons/devicon/llms.txt

Defines the structure of an individual icon entry within the devicon.json file, detailing name, aliases, tags, versions, and color. Useful for understanding metadata.

```javascript
// devicon.json entry structure
const iconEntry = {
  "name": "react",
  "altnames": ["reactjs"],
  "tags": ["framework", "frontend", "javascript", "ui"],
  "versions": {
    "svg": ["original", "original-wordmark", "plain", "plain-wordmark"],
    "font": ["original", "original-wordmark", "plain", "plain-wordmark"]
  },
  "color": "#61DAFB",
  "aliases": []
};
```

--------------------------------

### Fetching and Searching Devicon JSON Data

Source: https://context7.com/devicons/devicon/llms.txt

Provides asynchronous JavaScript functions to load the devicon.json data and search for icons based on tags. Demonstrates how to retrieve icon versions.

```javascript
// Fetch and search devicon.json
async function loadDeviconData() {
  const response = await fetch('https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.json');
  return await response.json();
}

// Search icons by tag
async function searchIconsByTag(tag) {
  const icons = await loadDeviconData();
  return icons.filter(icon =>
    icon.tags.some(t => t.toLowerCase().includes(tag.toLowerCase()))
  );
}

// Get all available versions for an icon
async function getIconVersions(iconName) {
  const icons = await loadDeviconData();
  const icon = icons.find(i => i.name === iconName);
  return icon ? icon.versions : null;
}

// Example: Build an icon picker
async function buildIconPicker() {
  const icons = await loadDeviconData();

  return icons.map(icon => ({
    name: icon.name,
    displayName: icon.name.charAt(0).toUpperCase() + icon.name.slice(1),
    color: icon.color,
    svgVersions: icon.versions.svg,
    fontVersions: icon.versions.font,
    tags: icon.tags,
    previewUrl: `https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${icon.name}/${icon.name}-original.svg`
  }));
}

// Usage
searchIconsByTag('database').then(icons => {
  console.log('Database icons:', icons.map(i => i.name));
  // Output: ['mongodb', 'mysql', 'postgresql', 'redis', 'sqlite', ...]
});

getIconVersions('typescript').then(versions => {
  console.log('TypeScript versions:', versions);
  // Output: { svg: ['original', 'plain'], font: ['plain'] }
});
```

--------------------------------

### Include Devicon Font via CDN

Source: https://github.com/devicons/devicon/blob/master/README.md

Add this line to your HTML header to include the Devicon font library from a CDN. This makes all Devicon icons available for use.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
```

--------------------------------

### Use Devicon Icon with img tag

Source: https://github.com/devicons/devicon/blob/master/README.md

Reference Devicon icons directly from the repository using the <img> tag and the SVG file path.

```html
<img src='https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/devicon/devicon-original.svg' />
```

--------------------------------

### Devicon JSON Entry Interface

Source: https://github.com/devicons/devicon/wiki/Updating-`devicon.json`

This is the interface that your devicon.json entry must adhere to. It includes fields for the technology name, alternative names, tags, version information, primary color, and aliases for font generation.

```javascript
{
        // the official name of the technology. See https://github.com/devicons/devicon/wiki/Naming-Conventions for more details
        "name": string, 

        // list of alternative names for this technology
        // used for the searchbar on the https://devicon.dev website.
        "altnames": string[], 

        // list of tags relating to the technology for categorization/search purpose (TBD)
        "tags": string[], 

        // keeps track of the different versions that you have.
        "versions": {
            // list all the SVGs that you have 
            "svg": VersionString[], 

            // list only the SVGs that can be converted to fonts.
            // usually refers to `plain` and `line` versions but `original` can be accepted.
            // DO NOT list aliases here (see below).
            "font": VersionString[] 
        }, 

        // the official/main color of the logo. Only track 1 color. Format is "#abcdef"
        "color": string, 

        // keeps track of the aliases for the font versions ONLY. Read on for more details
        // NOTE: as of Dec 2021, this attribute is now optional (see [this](https://github.com/devicons/devicon/discussions/465)). 
        // If you don't use it, still include the attribute but with an empty array `[]`.
        "aliases": AliasObj[] 
    }
```

--------------------------------

### Initialize Google Analytics

Source: https://github.com/devicons/devicon/blob/master/docs/index.html

This JavaScript code initializes Google Analytics by creating a tracker and sending a pageview. Ensure you have a valid Google Analytics tracking ID (`UA-45588276-4` in this case).

```javascript
(function(i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).push(arguments)
  }, i[r].l = 1 * new Date();
  a = s.createElement(o), m = s.getElementsByTagName(o)[0];
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-45588276-4', 'devicon.fr');
ga('send', 'pageview');
```

--------------------------------

### Use Devicon Font Icon

Source: https://github.com/devicons/devicon/blob/master/docs/index.html

Insert this `<i>` tag into the body of your HTML to display a Devicon icon. You can customize the icon name, version, and size using CSS `font-size`.

```html
<i class="devicon-{{selectedIcon.name}}-{{selectedFontIcon}} colored"></i>
```

--------------------------------

### Devicon JSON Structure for 'amazonwebservices'

Source: https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md

Defines the structure for an icon in Devicon's JSON format, including name, tags, available versions (SVG and font), color, and aliases. Note the '#' character in the color value.

```json
{
  "name": "amazonwebservices", 
  "tags": [
    "cloud",
    "hosting",
    "server"
  ],
  "versions": {
    "SVG": [
      "original",
      "original-wordmark",
      "plain-wordmark"
    ],
    "font": [
      "original",
      "plain-wordmark",
      "original" 
    ]
  },
  "color": "#F7A80D", 
  "aliases": [
    {
        "base": "original", 
        "alias": "plain" 
    }
  ]
}
```

--------------------------------

### Embed Raw SVG Code

Source: https://github.com/devicons/devicon/blob/master/README.md

Copy and paste the raw SVG code directly into your project for Devicon icons. Ensure the correct class is applied for styling.

```html
<!--  for devicon plain version -->
<svg id="Devicon" class='devicon-devicon-plain' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path id="plain" fill="#60be86" d="M64,7.83H4.77L14.95,95.13l49,25,.06,0,49.07-25L123.23,7.83Zm42.77,54.86c0,.88,0,1.67-.77,2L73.25,80.44l-2.42,1.13-.27-3.15V72.23l.24-1.57,1.09-.47L95.07,59.81l-21.54-9.6L64.35,68.34,58.9,78.87l-1.22,2.27-2.05-.9L22,64.71a2.42,2.42,0,0,1-1.45-2V56.91a2.39,2.39,0,0,1,1.42-2l34-15.73,3.21-1.44v9.66l.24,1.34-1.56.7L34.45,59.79,56.3,69.42l8.05-16,6.21-12.65,1.13-2.28,1.81.91L106,54.89c.73.35.76,1.14.76,2Z"/></svg>
```

--------------------------------

### Devicon JSON Object Structure

Source: https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md

This is the required object structure for each icon entry in the devicon.json file. It includes the technology name, tags, available versions (SVG and font), main color, and optional aliases.

```json
{
    // the official name of the technology. Must be lower case, no space and don't have the dash '-' character.
    "name": string, 

    // list of tags relating to the technology for search purpose
    "tags": string[], 

    // keep tracks of the different versions that you have. 
    "versions": {
        // list the SVGs that you have 
        "SVG": VersionString[], 

        // list the fonts acceptable versions that you have
        "font": VersionString[] 
    }, 

    // the main color of the logo. Only track 1 color
    "color": string, 

    // keeps track of the aliases for the font versions ONLY
    // see the <a href="#example">Example</a> section for more details
    // NOTE: this attribute is not required from now on (see <a href='https://github.com/devicons/devicon/discussions/465'>this</a>)
    // it is only being kept for backward compatibility
    "aliases": AliasObj[] 
}
```

--------------------------------

### Alias Object Interface for Font Icons

Source: https://github.com/devicons/devicon/wiki/Updating-`devicon.json`

The AliasObj interface defines how to create aliases for font icons. It specifies the base SVG file version and the desired alias name, allowing a single SVG to be referenced by multiple class names.

```javascript
{
  "base": VersionString, // the SVG file that you have
  "alias": VersionString // the alias that you want to create.
}
```

--------------------------------

### Include Devicon Font CSS

Source: https://github.com/devicons/devicon/blob/master/docs/index.html

Place this link tag in the header of your HTML file to include the Devicon font stylesheet. This is required for using Devicon as a font.

```html
<link rel="stylesheet" type='text/css' href="{{baseUrl}}devicon.min.css" />
```

--------------------------------

### Devicon Font Icon Sizing and Custom Colors

Source: https://context7.com/devicons/devicon/llms.txt

Control the size and color of Devicon font icons using standard CSS. The font size determines the icon's scale, and custom color properties can override default brand colors.

```html
<!-- Sizing with CSS -->
<style>
  .large-icon { font-size: 48px; }
  .custom-color { color: #61DAFB; }
</style>

<i class="devicon-react-original large-icon"></i>
<i class="devicon-github-original custom-color"></i>
```

--------------------------------

### Embed Devicon SVG using <img>

Source: https://github.com/devicons/devicon/blob/master/docs/index.html

Use this `<img>` tag to embed a Devicon icon as an SVG image. Specify the icon name and SVG version in the `src` attribute. Adjust `height` and `width` attributes to change the icon size.

```html
<img src="{{baseUrl}}icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{selectedIcon.svg[selectedSvgIndex]}}.svg" />
```

--------------------------------

### Update devicon.json for Amazon Web Services Icon

Source: https://github.com/devicons/devicon/wiki/Example-of-Submitting-Icons-to-the-Repository

This JSON object configures the Amazon Web Services icon. It specifies available SVG and font versions, color, and handles aliases for different icon styles. Note that aliases are now optional.

```json
{
  "name": "amazonwebservices", 
  "altnames": ["aws"],
  "tags": [
    "cloud",
    "hosting",
    "server"
  ],
  "versions": {
    "svg": [ // here are the versions that are available in SVGs
       "original",
       "original-wordmark",
       "plain-wordmark"
  ],
    "font": [
      "original", // "original" is simple enough to be used as the plain icon so we'll add "plain" to the aliases below
      "plain-wordmark",
       // note that the alias "plain" is not listed here. It must be listed in the `aliases` attribute
    ]
  },
  "color": "#F7A80D", // note the '#' character
  "aliases": [
    {
      "base": "original", // here is the SVG that we will upload to Icomoon
      "alias": "plain" // this is its alias. Our script will create a reference so users can use "original" or "plain" when referencing it
      // note that this is now optional (Jan 2022). You do not need to create aliases from now on. However, the attribute needs to stay so just put an empty `[]` if you are not using it.
    }
  ]
}
```