css.gg VS flag-icons

6. css.gg

css.gg - A library of more than 500 minimalistic CSS icons, which are customizable and retina-ready.

700+ CSS Icons: Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled components, Figma, and Adobe XD. Easy integration: Embed, NPM & API.

23. css icons

// Define and ADD custom CSS const customCSS = ` hr { background-color: #ccc !important; } a.menu-link i { margin-right: 16px; } `; const style = document.createElement("style"); style.type = "text/css"; style.appendChild(document.createTextNode(customCSS)); head.appendChild(style); // Define separator const separator = document.createElement("hr"); separator.setAttribute("width", "80%"); separator.setAttribute("color", "white"); separator.setAttribute("background-color", "white"); separator.setAttribute("height", "1px"); separator.setAttribute("visible", "true"); //Adding links MENU_LINKS.forEach((link) => { if (link.name === "separator") { // Adding separator menuContainer.appendChild(separator.cloneNode()); } else { // Adding link // Manage icon (automatically import if start with gg-*** from https://css.gg) let icon = ""; if (link.icon.startsWith("gg-")) { icon = ``; const ggName = link.icon.replace("gg-", ""); // Inject css in the head const cssLink = document.createElement("link"); cssLink.type = "text/css"; cssLink.rel = "stylesheet"; cssLink.href = `https://css.gg/${ggName}.css`; head.appendChild(cssLink); } else { icon = ``; } // Create link const linkNode = linkTemplate.cloneNode(); linkNode.setAttribute("href", link.url); linkNode.setAttribute("routerLink", link.url); linkNode.setAttribute("target", (link.target || "_self")); linkNode.innerHTML = icon + " " + link.name; // Add link to the menu menuContainer.appendChild(linkNode); } });

👉 css.gg

The CountryFlag component receives the same code property as our emoji component. Yet, it also accepts an optional path to hosted SVG files. I employ a NextJS app, therefore I store all flags in /images/flags within the public folder. I located these flags in the flag-icons GitHub repo and copied them to my project.

Country Flags in SVG\ (42 comments)

i use the Flag-Icons library in my Laravel-Project.

CSS Flag icons

I'm using the flag-icons SVG icons package, it is working fine in development mode but when I build the site icons are missing in production.