Font Icon

Below are svg icons that are automatically compiled into fonts for use as text using Gulp.

Demonstration

AI

Browser

Code

Content Action

Design

Engine

Interface

Interface File

Language

Media

Network

Office

Platform

Project Management

Social

System

Version Control

Web

About

These SVG icons are automatically grouped into fonts based on the subdirectories that they are stored in. CSS is also separated by group for minimal data transferred to the client.

Implementation Example

HTML

<p class="font-icon--color--ai--openai"><span class="icon-ai-openai"></span><br><span>OpenAI</span></p>

CSS Compiled

@font-face {
  font-family: font_icon_ai;
  src: url(/font_icon/ai/font_icon_ai.eot);
  src: url(/font_icon/ai/font_icon_ai.eot?#iefix) format('embedded-opentype'), local('☺'), url(/font_icon/ai/font_icon_ai.woff2) format('woff2'), url(/font_icon/ai/font_icon_ai.woff) format('woff'), url(/font_icon/ai/font_icon_ai.ttf) format('truetype'), url(/font_icon/ai/font_icon_ai.svg#font_icon_ai) format('svg');
  font-weight: 400;
  font-style: normal
}

[class*=" font-icon--ai-"],
[class^=icon-ai-] {
  font-family: font_icon_ai
}

.icon-ai-openai:before {
  content: "\E001"
}

.font-icon--color--ai--openai {
  color: #10a37f !important
}

.font-icon--color--ai--openai--background {
  color: #fff !important;
  background-color: #10a37f !important
}

Sass (SCSS) + JS Template

<%
var pathParts = fontPath.split('/'); // Split the fontPath by '/'
var subDir = pathParts[pathParts.length - 2]; // Get the second last part, which is 'subdir'
function getAutoGenColor(hexColor) { // Function to check brightness of hex color and return appropriate text color
    hexColor = hexColor.replace('#', '');
    var r = parseInt(hexColor.substring(0, 2), 16);
    var g = parseInt(hexColor.substring(2, 4), 16);
    var b = parseInt(hexColor.substring(4, 6), 16);
    var brightness = (r * 299 + g * 587 + b * 114) / 1000;
    return brightness > 128 ? '#000' : '#fff';
}
function isHexColor(color) { // Function to check if a string is a valid hex color code
    return /^([0-9A-F]{6})$/i.test(color);
}
%>@font-face {
    font-family: '<%= fontName %>';
    src: url('<%= fontPath %><%= fontName %>.eot'); /* IE9 Compat Modes */
    src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'),
          local('☺'), /* css hack to divert IE6-8 from downloading fonts it can't use */
          url('<%= fontPath %><%= fontName %>.woff2') format('woff2'), /* Super Modern Browsers */
          url('<%= fontPath %><%= fontName %>.woff') format('woff'), /* Pretty Modern Browsers */
          url('<%= fontPath %><%= fontName %>.ttf') format('truetype'), /* Safari, Android, iOS */
          url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

[class^="icon-<%= subDir %>-"], [class*=" font-icon--<%= subDir %>-"] {
    font-family: '<%= fontName %>';
}
<% console.log(glyphs); %><% glyphs.forEach(function(glyph) {
    var fileName = glyph.fileName;
    var fileColor = null;
    var hexColorMatch = fileName.match(/-(\w{6})$/);
    if (hexColorMatch && isHexColor(hexColorMatch[1])) {
        fileColor = hexColorMatch[1];
        fileName = fileName.replace(/-(\w{6})$/, '');
    }%>
.icon-<%= subDir %>-<%= fileName %>:before {
    content: "\<%= glyph.codePoint %>";
}
<% if (fileColor) { %>
.font-icon--color--<%= subDir %>-<%= fileName %> {
    color: #<%= fileColor %> !important;
}
.font-icon--color--<%= subDir %>-<%= fileName %>--background {
    color: <%= getAutoGenColor(fileColor) %> !important;
    background-color: #<%= fileColor %> !important;
}
<% } %>
<% }); %>

Special Thanks