Filled Icons

Fills are officially not supported. However, all SVG properties are available on all icons. Fill can still be used and will work fine on certain icons.

Example with stars:

import Star from '@ycloud-web/icons-solid/icons/star';
import StarHalf from '@ycloud-web/icons-solid/icons/star-half';

import './icon.css';

function App() {
  return (
    <div class="app">
      <div class="star-rating">
        <div class="stars">
          {Array.from({ length: 5 }, () => (
            <Star
              fill="#111"
              strokeWidth={0}
            />
          ))}
        </div>
        <div class="stars rating">
          <Star
            fill="yellow"
            strokeWidth={0}
          />
          <Star
            fill="yellow"
            strokeWidth={0}
          />
          <StarHalf
            fill="yellow"
            strokeWidth={0}
          />
        </div>
      </div>
    </div>
  );
}

export default App;

Open Sandbox