import type * as React from "react" /** * The language and file marks, keyed by extension. A logo is not a glyph * with a shape you can choose, it is a specific mark in specific colours, so * these are drawn here rather than looked up in an icon set — the same * exception `google-icons`, `model-icons` and `color-icons` make, for the * same reason. * * Each mark is written without `width` or `height` so the class sizing it * wins, and with `aria-hidden` since a mark stands beside the file name * rather than in place of it. * * The gradient ids inside a mark are prefixed per language. They are still * document-wide names, so a mark drawn twice on one page repeats them; the * duplicates resolve to identical definitions and draw correctly, but that * is the ceiling on what an id in a component can promise. */ type IconProps = React.SVGProps export const codeIcons = { // Languages js: (props: IconProps) => ( ), ts: (props: IconProps) => ( ), tsx: (props: IconProps) => ( ), // Written without the mark's own `width` and `height`, and spreading props // like the rest: with them it drew at 1000px whatever class was sizing it. css: (props: IconProps) => ( ), python: (props: IconProps) => ( ), go: (props: IconProps) => ( ), rust: (props: IconProps) => ( ), bash: (props: IconProps) => ( ), // Files json: (props: IconProps) => ( ), md: (props: IconProps) => ( ), svg: (props: IconProps) => ( ), ico: (props: IconProps) => ( ), gitignore: (props: IconProps) => ( ), env: (props: IconProps) => ( ), pdf: (props: IconProps) => ( ), } /** The notations this set has a mark for, and the key each one answers to. */ export type CodeIconName = keyof typeof codeIcons export type { IconProps as CodeIconProps }

Code Icons

01Preview

02Installation