[SOLVED] How do I convert these SVG properties into CSS declarations?

How do I convert these SVG properties into CSS declarations?

I have the following HTML:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="10.5" cy="10.5" r="7.5"></circle>
  <line x1="21" y1="21" x2="15.8" y2="15.8"></line>
</svg>

The HTML looks clunky at best, how do I convert it's properties into CSS?

For example:

#search-svg {
  width: 20;
  height: 20;
  viewBox: 0 0 24 24;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

I know that the width, height and fill properties exist and can be converted into CSS.

However I don't know how the other properties work or what their CSS equivalents are, and a quick search on caniuse yeilds no results for CSS properties beginning with stroke.

Thank you.

Solution

I checked it and almost all properties from your example works, you have to remember that size properties needs unit eg. px.

svg {
  width: 40px;
  height: 40px;
  fill: red;
  stroke: green;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

circle {
  cx: 12px;
  cy: 13px;
  r: 6px;
}

Also found an source of more data about SVG properties https://css-tricks.com/svg-properties-and-css/