Incorrect octicon name crashes live preview

[KendrickAng]

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [X] Bug fix

What is the rationale for this request?
Resolves #1266

Currently, if a user tries to use an invalid octicon, the live server crashes. On the other hand, this does not happen with glyphicons since usage of empty glyphicons just results in an empty <span glyphicon glyphicon-invalid></span>.

What changes did you make? (Give an overview)
Added an existence check for the octicon the user wants to use, returning an empty <span> otherwise.

Provide some example code that this change will affect:

    // ensure octicons exist
    if (iconFontType === 'octicon' || iconFontType === 'octiconlight') {
      if (!octicons.hasOwnProperty(iconFontName)) {
        return `<span aria-hidden="true"></span>`;
      }
    }

Is there anything you'd like reviewers to focus on?
https://primer.style/octicons/packages/javascript
It is possible for us to use the octicons API to adjust the height/width of the glyphicons we need. This would be much less of a hassle that currently having to create a new class just to resize the icon. Perhaps we could consider adding in this functionality?

Testing instructions:
Try serving a webpage with invalid octicon.

Proposed commit message: (wrap lines at 72 characters)
add validity check for octicons

[ang-zeyu]

Looks good!

Let's remove the unrelated style changes and keep that to a separate pr (there's quite a few files in the markdown-it folder that should really be linted) (some not, to preserve the style of the external source we extracted it from)

[KendrickAng]

Got it! In the meantime, what do you think about extending octicon functionality to allow configuration of height and width of octicons with markdown? I mentioned in the description that It is possible for us to use the octicons API to adjust the height/width of the glyphicons we need.

This might be beneficial for users who want to manually adjust octicon width/height with minimal hassle

[ang-zeyu]

Got it! In the meantime, what do you think about extending octicon functionality to allow configuration of height and width of octicons with markdown? I mentioned in the description that It is possible for us to use the octicons API to adjust the height/width of the glyphicons we need.

This might be beneficial for users who want to manually adjust octicon width/height with minimal hassle

hmm definitely nice to have, although icons are already responsive to font-size

If we support sizing for some icons but not others it may be slightly inconsistent feature wise though.
Is it possible to add it to fa, glyph and github icons as well?

Could get user opinions from @damithc too

[ang-zeyu]

is it possible to combine the below checks (iconFontType === 'octicon' and `iconFontType === 'octiconlight') and only adjust the style conditionally?
so we have less repeated code down there, and integrate this check only where its needed

[KendrickAng]

Right, that would be much better, I'll do that

[damithc]

hmm definitely nice to have, although icons are already responsive to font-size

If we support sizing for some icons but not others it may be slightly inconsistent feature wise though.
Is it possible to add it to fa, glyph and github icons as well?

Could get user opinions from @damithc too

As @ang-zeyu mentioned, if we were to add that feature, we should do that for all three types of icons. Perhaps no need as we can use the font size to adjust the icon size?

[KendrickAng]

hmm definitely nice to have, although icons are already responsive to font-size
If we support sizing for some icons but not others it may be slightly inconsistent feature wise though.
Is it possible to add it to fa, glyph and github icons as well?
Could get user opinions from @damithc too

As @ang-zeyu mentioned, if we were to add that feature, we should do that for all three types of icons. Perhaps no need as we can use the font size to adjust the icon size?

My concern was that users not familiar with css would have trouble with the usage of classes to resize the icons (I was unaware that you could use font-size to resize icons..), but I suppose it wouldn't be needed right now

For my own learning: what is the difference using font-size versus using height/width to resize an image? I thought using font-size was meant for text elements only

[damithc]

For my own learning: what is the difference using font-size versus using height/width to resize an image? I thought using font-size was meant for text elements only

From what I understand (I could be wrong), these icons are implemented as a text font. So, they can be manipulated as text.

[ang-zeyu]

should this be above octicons[iconFontName]? 😮

[KendrickAng]

No, it shouldn't ... so sorry about that 😓

[KendrickAng]

corrected!

[ang-zeyu]

Lgtm 👍

My concern was that users not familiar with css would have trouble with the usage of classes to resize the icons (I was unaware that you could use font-size to resize icons..), but I suppose it wouldn't be needed right now

My view is that it may still be convenient to be able to easily adjust just the size of the icon octicon-xx-2x vs using a wrapper <span class="..."> :octicon-xx: </span>

Perhaps we could raise this as a low priority issue? But if such cases are few and far between then maybe not worth the maintenance costs

For my own learning: what is the difference using font-size versus using height/width to resize an image? I thought using font-size was meant for text elements only

From what I understand (I could be wrong), these icons are implemented as a text font. So, they can be manipulated as text.

and any element that uses em / rem sizing #1132 (octicons are svgs)