Update icons? about perfcascade

[tobli]

I have a PR coming up for enabling mime icons and indicator icons separately. Just needs some cleanup to submit.

[micmro]

Cool. Np, will have a look. Might have to wait for the weekend though, have my Korean course tomorrow night.

…

On 14 Dec 2016 2:20 p.m., "Peter Hedenskog" ***@***.***> wrote: @micmro <https://github.com/micmro> I need your help on this, I got totally stuck on my lack of SVG skills. I've tried adding some of the svgs in https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg but however I do they are just tooo big? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#63 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABmkBtiSOEpO9QMLD7EkmSYb2zyTVDW0ks5rH3yagaJpZM4LCSn9> .

[micmro]

I had just quickly thrown them together myself and I'm not quite a designer, so I don't feel attachment to them :). Would be great if you can source some that work with the repos MIT license.
Just let me know if you need my help with anything.

[soulgalore]

Cool, I'll do that when I get back home in a week or so. Would love a release before that though with the changes we have + possible more horizontal lines, if you have time :)

[soulgalore]

@beenanner @tobli have you seen any good svg icons we could use?

[beenanner]

I did a quick search on http://www.iconninja.com/, but didn't find any as clean as what you found @soulgalore.

[soulgalore]

Maybe we can use Font Awesome and then when 5.0 upgrade to the latest? https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg Haven't mapped everything yet though.

[soulgalore]

@micmro I need your help on this, I got totally stuck on my lack of SVG skills. I've tried adding some of the svgs in https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg but however I do they are just tooo big?

[micmro]

Hi @soulgalore, where do you try to add them? To src/ts/helpers/icons.ts?

Looking at one it looks like you have to remove or change the width, height and viewbox in the <svg width="1792" height="1792" viewBox="0 0 1792 1792" viewBox="0 0 1792 1792 part .

If you let me know which ones you want to use where I could also add them for you.

[soulgalore]

Hey @micmro yes, that's how I tried but somehow the path element has the size inside? Like if I take the path element only of one of the icons and then change one icon in icons.ts it just get too big and with wrong offset?

[micmro]

Sorry, looks like I was wrong, you need to maintain the viewBox, you could do it like this:

  const parser = new DOMParser()
  let test = `<svg x="${x}" y="${y}" width="18" height="18" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
      <g class="icon icon-no-tls" transform="scale(${scale})">
        <!-- start custom -->
        <path d="M1792 1344v128q0 26-19 45t-45 19h-1664q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1664q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h896q26 0 45 19t19 45zm256-384v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-640q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h640q26 0 45 19t19 45z"/>
        <!-- end custom -->
      </g>
    </svg>`

  const doc = parser.parseFromString(test, "image/svg+xml")
  return doc.firstChild as SVGElement

but thats not super clean, I think using Inkscape (free OSS) or Illustrator to resize it to the baseline size of 18px by 18px (same as other icons) first would be better, than you can use the same pattern as the other icons.

Just found a guide for Inkscape resizing here.

[soulgalore]

cool, thanks! I'll test it tonight! think @tobli has an PR coming to restructure the icons.