solar-icon-set-react's Introduction

Solar Icon Set

Solar Icon Set - free giant pack of icons. Drawn from scratch. Six styles, perfect balance, we`ve got everything You could ever need in React.

Install

npm install solar-icon-set

Usage

import * as SolarIconSet from "solar-icon-set";

function App() {
  return <SolarIconSet.Document color="#1C274C" size={24} iconStyle="Bold" />;
}

import { Document } from "solar-icon-set/school";

function App() {
  return <Document color="#1C274C" size={24} iconStyle="Bold" />;
}

Prop Types

Property	Type	Required	Default	Description
color	`String`	No	`#1C274D`	Override the icon's fill color
size	`Number`	No	`16px`	Change icon size
autoSize	`Boolean`	No	`false`	Enable automatic resizing
svgProps	`SVGSVGElement`	No	`undefined`	SVG default properties
iconStyle	`Broken`, `LineDuotone`, `Linear`, `Outline`, `Bold`, `BoldDuotone`	No	`Linear`	Choose one of the styles

solar-icon-set-react's People

Contributors

Stargazers

solar-icon-set-react's Issues

svg Height and Width "inherit" values are invalid

Hello,
I'm trying to use this library, but it generates 2 warnings for each icon in the browser console:

Valeur inherit inattendue lors de l’analyse de l’attribut width.
Valeur inherit inattendue lors de l’analyse de l’attribut height.

This can be translated to "Unexpected value for width/height attribute"

In fact, each svg contains "inherit" for width and height, but they are not valid values in svg.
<svg width="inherit" height="inherit" viewBox="0 0 24 24"
https://github.com/480-Design/Solar-Icon-Set-React/blob/main/src/icons/Arrows/AltArrowDown.tsx

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width#svg
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height#svg
Valid values for svg width and height are: auto | a length | a percentage

If we remove width="inherit" height="inherit" from svg, icon seems to still work and are still resizing when parent wrapper width and height are updated.

<span
      role="img"
      aria-hidden="true"
      style={{
        color: color,
        width: size,
        height: size,
        display: "inline-flex",
        fontSize: "inherit",
      }}
      {...restProps}
    >
      {icon}
    </span>

https://github.com/480-Design/Solar-Icon-Set-React/blob/main/src/icons/IconWrapper.tsx

So can we remove these props?

And is this project still maintained? Links on the readme are dead too