Devicon CSS Class Mapping and Language Identifier Interoperability

Answer to the Core Questions

1. Documented transformation rule

• Replace the hash symbol (#) with the word sharp.
• Replace each plus sign (+) with plus.
• Replace a dot (.) with dot.
• Convert the entire string to lowercase.
• Prefix with devicon- and append the chosen style suffix (plain, line, or solid).

Examples:

• “C#” → devicon-csharp-plain
• “C++” → devicon-cplusplus-plain
• “.NET” → devicon-dotnet-plain

2. Consistency across library versions

The same substitution rules are applied in Devicon 3.x and 4.x releases. No version‑specific overrides have been documented for these core language names. New icons added after 4.0 follow the same logic unless a release note explicitly states a change.

Practical Verification Steps (for your current project)

1. Locate the CSS file

   Open the bundled devicon.min.css (or the unminified devicon.css) that ships with your Devicon package.

2. Search for the class

   Use a text editor or grep to find the generated class name, e.g., devicon-csharp-plain.

3. Test rendering

   Create a minimal HTML snippet:

   <link rel="stylesheet" href="path/to/devicon.css">
   <i class="devicon-csharp-plain"></i>
   

   Open the page in a browser and confirm the icon appears.

4. Cross‑check style suffix

   If you need a different style, replace plain with line or solid and repeat the test.

Possible Diagnostic Detail

If you encounter a missing icon, confirm the exact Devicon version you are using. Subtle changes in a patch release could affect the generated class names. Provide the version number (e.g., devicon 4.1.0) so the mapping can be verified against the correct source.