Andrew Ross DopamineDriven

🎯

cloud hopping

Stack Much

DopamineDriven / index.d.ts

Created August 20, 2020 07:39

	export interface IconDefinition extends IconLookup {
	icon: [
	number, // width
	number, // height
	string[], // ligatures
	string, // unicode
	IconPathData // svgPathData -> string \| string[]
	];
	}

DopamineDriven / example.ts

Created August 20, 2020 07:42

Example of CustomIcon

	const CustomIconExample: IconDefinition & IconLookup = {
	prefix: 'fab',
	iconName: 'example-icon',
	icon: [
	64, // viewBox width
	64, // viewBox height
	[], // ligatures
	'#000000', // fill/fillColor
	'M24 22.525H0' // iconPath(s)
	]

DopamineDriven / viewBox

Created August 20, 2020 07:43

[min-x min-y width height]

DopamineDriven / fas-custom-integration.ts

Created August 20, 2020 07:45

Lib Directory

	import {
	library,
	IconDefinition,
	IconLookup
	} from '@fortawesome/fontawesome-svg-core';

DopamineDriven / vercel.html

Created August 20, 2020 07:47

Vercel Icon

	<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	aria-hidden="true"
	focusable="false"
	width="1em"
	height="1em"
	style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"
	preserveAspectRatio="xMidYMid meet"
	viewBox="0 0 24 24"

DopamineDriven / vercel-refactored.html

Created August 20, 2020 07:50

Figma refactored Vercel SVG

DopamineDriven / fas-custom-integration.ts

Created August 20, 2020 07:52

custom icon step 5

	export const faCustomVercelIcon: IconDefinition & IconLookup = {
	prefix: 'fab',
	iconName: 'vercel-icon',
	icon: [
	24,
	24,
	[],
	'none',
	'M24 22.525H0l12-21.05l12 21.05z'
	]

DopamineDriven / fas-custom-integration.ts

Created August 20, 2020 07:53

step 5 ft library.add()

	export const faCustomVercelIcon: IconDefinition & IconLookup = {
	prefix: 'fab',
	iconName: 'vercel-icon',
	icon: [
	24,
	24,
	[],
	'none',
	'M24 22.525H0l12-21.05l12 21.05z'
	]

DopamineDriven / index.d.ts

Created August 20, 2020 07:55

fontawesome-common-types IconName type addition

	export type IconName = 'vercel-icon' \| '500px' \|
	'accessible-icon' \|
	'accusoft' \|
	'acquisitions-incorporated' \|
	// ...7,846 lines later...
	'wrench' \|
	'x-ray' \|
	'yen-sign' \|
	'yin-yang';

DopamineDriven / index.d.ts

Created August 20, 2020 07:56

IconPrefix type manipulation

export type IconPrefix = "fas" | "fab" | "fac" | "far" | "fal" | "fad";

	export type IconName = 'vercel-icon' \| '500px' \|
	'accessible-icon' \|
	'accusoft' \|
	'acquisitions-incorporated' \|
	// ...7,846 lines later...
	'wrench' \|
	'x-ray' \|
	'yen-sign' \|
	'yin-yang';