header icon sizing/svg?

[SharonStrats]

This is in branch add-header-styles Currently all icons in solid-ui are in the icon directory as svg files, however in mashlib the icon for the header sits in a icon.ts file. I think I should make this a svg file called header-icon.svg and store it in the icon directory to match the organization of solid-ui, since it will now be in that repository. Want to get feedback?

The other thing I have ran into is that the svg (defined in src/header/icon.ts) defines the styling, which is called header-banner__icon. I'm not quite sure how to do this in jss. Meaning: I have defined this style in my styleMap.ts. How might I link this style to an svg? Or do I need to just hardcode this style in the svg itself?

[michielbdejong]

Re first question, the header doesn't need a default branding icon, so you could just leave the Solid icon that mashlib uses in mashlib, and pass it into Solid UI as an option parameter of the initHeader call. If you do want to move the icon into Solid UI as a default icon to use, then yes, follow the existing system of putting the svg file in that folder.

Re second question, an svg itself doesn't have styling, but the img element that shows it probably does? I saw that initHeader assigns those classes and I think they are then referred to in Mashlib's style.css. Probably those classes give the header its current style, which is what we're moving away from. Once you've given the header the style from design.inrupt.com through JSS I don't think it make sense to also add that class on top of the style, that would probably only interfere with the self-contained design which you apply through JSS. So I would say, just ditch it. :)

[SharonStrats]

yeah i was thinking of it as the default. I will do what you said above and not include it for now. If so that may also solve the second question. If not, I'll comment here.

[SharonStrats]

After spending some time trying to sort out the sizing. I'm going to explain the details here for someone's review.

Due to the way the styles get added in JSS, this does not work for the way it was originally designed in Mashlib. Specifically, the svg is exported and in the svg definition the class is assigned. And it is displayed using innerHTML = icon(exported svg). In JSS however you need to add the styles, based on the class. And I could not figure out a way to do this given the above code where the svg was assigned directly to the innerHTML. -- if anyone has a solution to this, please let me know.

What I have done: I have now created an img element and have appended it to the tag (so it is also a link). I was then able to add the JSS styles. In doing this I think it will create a restriction that the svg(image) needs to be external. I am currently defaulting to this https://solidproject.org/assets/img/solid-emblem.svg which I found in the button examples. We can use anything.. just need to decide. And of course through configuration (options), any other logo can be passed in.

Please let me know your thoughts.

[megoth]

Note that you can add CSS to children of classes in JSS by using nested selectors. So yes, you need to add a class to a parent element, but from that you can refer to the svg element using a nested selector.