Fix inconsistent icon apparent size

Author: pol-rivero

app/src/ui/octicons/octicon.tsx

@@ -45,7 +45,7 @@ export class Octicon extends React.Component<IOcticonProps, {}> {
     const { symbol } = this.props
 
     if (this.isSingleVariant(symbol)) {
-      return this.renderIcon(symbol.p, symbol.h, symbol.w)
+      return this.renderIcon(symbol.p, symbol.h, symbol.w, symbol.mult ?? 1)
     } else {
       const height = this.props.height ?? 16
       const naturalHeight = this.closestNaturalHeight(
@@ -63,11 +63,21 @@ export class Octicon extends React.Component<IOcticonProps, {}> {
       const naturalWidth = scaledSymbol.w
       const width = height * (naturalWidth / naturalHeight)
 
-      return this.renderIcon(scaledSymbol.p, height, width)
+      return this.renderIcon(
+        scaledSymbol.p,
+        height,
+        width,
+        scaledSymbol.mult ?? 1
+      )
     }
   }
 
-  private renderIcon(paths: string[], height: number, width: number) {
+  private renderIcon(
+    paths: string[],
+    height: number,
+    width: number,
+    sizeMultiplier: number
+  ) {
     const { title, tooltipDirection } = this.props
     const viewBox = `0 0 ${width} ${height}`
     const className = classNames('octicon', this.props.className)
@@ -90,8 +100,8 @@ export class Octicon extends React.Component<IOcticonProps, {}> {
         viewBox={viewBox}
         ref={this.svgRef}
         tabIndex={-1}
-        height={height}
-        width={width}
+        height={height * sizeMultiplier}
+        width={width * sizeMultiplier}
       >
         {title !== undefined && (
           <Tooltip target={this.svgRef} direction={direction}>

app/src/ui/octicons/octicons.generated.ts

@@ -12,6 +12,9 @@ export type OcticonSymbolVariant = {
 
   /** The height of the symbol */
   readonly h: number
+
+  /** The size multiplier in order to normalize the apparent size (generally between 0 and 1) */
+  readonly mult?: number
 }
 
 export type OcticonSymbolVariants = Record<PropertyKey, OcticonSymbolVariant>
@@ -1739,6 +1742,7 @@ export const fileDiff: OcticonSymbolVariants = {
     ],
     h: 16,
     w: 16,
+    mult: 0.875,
   },
   '24': {
     p: [
@@ -1747,6 +1751,7 @@ export const fileDiff: OcticonSymbolVariants = {
     ],
     h: 24,
     w: 24,
+    mult: 0.875,
   },
 }
 export const fileDirectory: OcticonSymbolVariants = {
@@ -1756,13 +1761,15 @@ export const fileDirectory: OcticonSymbolVariants = {
     ],
     h: 16,
     w: 16,
+    mult: 0.9375,
   },
   '24': {
     p: [
       'M2 4.75C2 3.784 2.784 3 3.75 3h4.971c.58 0 1.12.286 1.447.765l1.404 2.063c.046.069.124.11.207.11h8.471c.966 0 1.75.783 1.75 1.75V19.25A1.75 1.75 0 0 1 20.25 21H3.75A1.75 1.75 0 0 1 2 19.25Zm1.75-.25a.25.25 0 0 0-.25.25v14.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V7.687a.25.25 0 0 0-.25-.25h-8.471a1.75 1.75 0 0 1-1.447-.765L8.928 4.61a.252.252 0 0 0-.208-.11Z',
     ],
     h: 24,
     w: 24,
+    mult: 0.9375,
   },
 }
 export const fileDirectoryFill: OcticonSymbolVariants = {
@@ -2171,13 +2178,15 @@ export const globe: OcticonSymbolVariants = {
     ],
     h: 16,
     w: 16,
+    mult: 0.875,
   },
   '24': {
     p: [
       'M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1Zm3.241 10.5v-.001c-.1-2.708-.992-4.904-1.89-6.452a13.919 13.919 0 0 0-1.304-1.88L12 3.11l-.047.059c-.354.425-.828 1.06-1.304 1.88-.898 1.547-1.79 3.743-1.89 6.451Zm-12.728 0h4.745c.1-3.037 1.1-5.49 2.093-7.204.39-.672.78-1.233 1.119-1.673C6.11 3.329 2.746 7 2.513 11.5Zm18.974 0C21.254 7 17.89 3.329 13.53 2.623c.339.44.729 1.001 1.119 1.673.993 1.714 1.993 4.167 2.093 7.204ZM8.787 13c.182 2.478 1.02 4.5 1.862 5.953.382.661.818 1.29 1.304 1.88l.047.057.047-.059c.354-.425.828-1.06 1.304-1.88.842-1.451 1.679-3.471 1.862-5.951Zm-1.504 0H2.552a9.505 9.505 0 0 0 7.918 8.377 15.773 15.773 0 0 1-1.119-1.673C8.413 18.085 7.47 15.807 7.283 13Zm9.434 0c-.186 2.807-1.13 5.085-2.068 6.704-.39.672-.78 1.233-1.118 1.673A9.506 9.506 0 0 0 21.447 13Z',
     ],
     h: 24,
     w: 24,
+    mult: 0.875,
   },
 }
 export const goal: OcticonSymbolVariants = {
@@ -2833,6 +2842,7 @@ export const markGithub: OcticonSymbolVariants = {
     ],
     h: 16,
     w: 16,
+    mult: 0.875,
   },
 }
 export const markdown: OcticonSymbolVariants = {
@@ -4624,6 +4634,7 @@ export const trash: OcticonSymbolVariants = {
     ],
     h: 16,
     w: 16,
+    mult: 0.9375,
   },
   '24': {
     p: [
@@ -4632,6 +4643,7 @@ export const trash: OcticonSymbolVariants = {
     ],
     h: 24,
     w: 24,
+    mult: 0.9375,
   },
 }
 export const triangleDown: OcticonSymbolVariants = {

app/src/ui/octicons/stash.ts

@@ -13,4 +13,5 @@ export const stash: OcticonSymbolVariant = {
       '1.29 1.485 1.29h9a1.5 1.5 0 0 0 1.5-1.5v-9a1.5 1.5 0 0 0-1.29-1.485v1.442a.216.216 0 0 1 ' +
       '.004.043v9a.214.214 0 0 1-.214.214h-9a.216.216 0 0 1-.043-.004H4.015z',
   ],
+  mult: 14 / 16,
 }

script/generate-octicons.ts

@@ -39,6 +39,7 @@ interface IOcticonVariant {
   p: string[]
   h: number
   w: number
+  mult?: number
 }
 
 interface IOcticon {
@@ -73,13 +74,31 @@ async function generateIconData(): Promise<ReadonlyArray<IOcticon>> {
           p: data.ast.children.map(c => c.attributes.d),
           h: parseInt(data.options.height, 10),
           w: parseInt(data.options.width, 10),
+          mult: getSizeMultiplier(name),
+        }
+        if (variants[height].mult === undefined) {
+          delete variants[height].mult
         }
       })
 
       return { name: getJsFriendlyName(name), variants }
     })
 }
 
+function getSizeMultiplier(icon: string) {
+  switch (icon) {
+    case 'globe':
+    case 'mark-github':
+    case 'file-diff':
+      return 14 / 16
+    case 'file-directory':
+    case 'trash':
+      return 15 / 16
+    default:
+      return undefined
+  }
+}
+
 generateIconData().then(results => {
   console.log(`Writing ${results.length} octicons...`)
 
@@ -104,6 +123,9 @@ export type OcticonSymbolVariant = {
 
   /** The height of the symbol */
   readonly h: number
+
+  /** The size multiplier in order to normalize the apparent size (generally between 0 and 1) */
+  readonly mult?: number
 }
 
 export type OcticonSymbolVariants = Record<PropertyKey, OcticonSymbolVariant>