Stroke

Atomic Props	CSS Properties
strokeCurrent	stroke: currentColor

Usage

Result

Loading...

Live Editor

<Box gap3> <Box as="svg" strokeCurrent red500 fillRed200 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> </Box> <Box as="svg" strokeCurrent teal500 fillTeal200 square10 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> </Box> </Box>

<Box gap3>
  <Box
    as="svg"
    strokeCurrent
    red500
    fillRed200
    square10
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
    />
  </Box>
  <Box
    as="svg"
    strokeCurrent
    teal500
    fillTeal200
    square10
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
    />
  </Box>
</Box>