Skip to content

Instantly share code, notes, and snippets.

@kyleshevlin

kyleshevlin/tagIcon.js

Created February 14, 2021 22:14
Show Gist options
  • Save kyleshevlin/c2ec4ea76cabb18ab86c8602f4641ff3 to your computer and use it in GitHub Desktop.
Save kyleshevlin/c2ec4ea76cabb18ab86c8602f4641ff3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kyleshevlin created this gist Feb 14, 2021.
    38 changes: 38 additions & 0 deletions tagIcon.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    import React from 'react'

    const WIDTH = 20
    const HEIGHT = 14
    const CX = WIDTH / 3
    const CY = HEIGHT / 2
    const RADIUS = 2

    export default function Tag({ fill = 'black', width = WIDTH }) {
    const height = HEIGHT * (width / WIDTH)

    return (
    <svg
    fill="none"
    viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
    width={width}
    height={height}
    xmlns="http://www.w3.org/2000/svg"
    >
    <path fill={fill} fillRule="evenodd" d={dPath} />
    </svg>
    )
    }

    const dPath = `
    M0,${HEIGHT / 3}
    ${WIDTH / 4},0
    ${WIDTH},0
    ${WIDTH},${HEIGHT}
    ${WIDTH / 4},${HEIGHT}
    0,${(2 * HEIGHT) / 3}Z
    M${CX - RADIUS},${CY}
    Q${CX - RADIUS},${CY - RADIUS} ${CX},${CY - RADIUS}
    Q${CX + RADIUS},${CY - RADIUS} ${CX + RADIUS},${CY}
    Q${CX + RADIUS},${CY + RADIUS} ${CX},${CY + RADIUS}
    Q${CX - RADIUS},${CY + RADIUS} ${CX - RADIUS},${CY}Z
    `