search

FirefoxUX / photon-icons

The design tokens for the Photon icons
Mozilla Public License 2.0
24 stars 13 forks source link

WIP - add more icons. #19

Closed bwinton closed 6 years ago

bwinton commented 6 years ago

I copied the icons from the google drive, and lightly editted the json file. More help adding new entries would be greatly appreciated! :wink:

bwinton commented 6 years ago

Oh, yeah, we should add an svgo step in the build script. I'll do that in this patch.

You can see the changes by editing your package.json and pointing the photon-icons version to the direcetory on your filesystem where the code lives (like ../photon-icons/)

bwinton commented 6 years ago

(Oh, you'll need to add the extra icons to the photon-icons.json first. I guess I could take a stab at that…)

ExE-Boss commented 6 years ago

Shouldn’t the icons keep the unminimised license headers?

bwinton commented 6 years ago

Enh. I dunno. It's hard to get svgo to not minimize the comments, and I feel like the license is still valid in this form, so... 🤷‍♂️

aminalhazwani commented 6 years ago

@bwinton I did a first content editing, we can merge this and do a second iteration after I file a couple of issues for following things.

bwinton commented 6 years ago

One more thing... https://www.mozilla.org/en-US/MPL/2.0/FAQ/#full-copy-only suggests that we might not need the header on every file, so maybe we should remove it, and add it back when people click the download button?

ExE-Boss commented 6 years ago

Or, add it during the publishing to npm process, that way, once I make use of this in my Application Menu extension (Mozilla Add‑on) for the Photon theme, I don’t have to add it myself to every file during the build step (since my Application Menu extension is licensed under the GPL-3.0 license).

(also, I would prefer to merge #21 first)

aminalhazwani commented 6 years ago

I am soon to add also some Android icons, do not merge 🙂

aminalhazwani commented 6 years ago

@bwinton I added a couple of Android icons and started to fill some tags values. Question: when I run npm run test I get this error

Poorly-sized entries:
  icons/android/info-24.svg does not have a proper viewBox.
  icons/android/back-24.svg does not have a proper viewBox.
  icons/android/forward-24.svg does not have a proper viewBox.
  icons/android/refresh-24.svg does not have a proper viewBox.
  icons/android/stop-24.svg does not have a proper viewBox.
  icons/android/data-collection-24.svg does not have a proper viewBox.
  icons/android/delete-24.svg does not have a proper viewBox.
  icons/android/pin-24.svg does not have a proper viewBox.
  icons/android/pin-outline-24.svg does not have a proper viewBox.
  icons/android/preferences-24.svg does not have a proper viewBox.
  icons/android/turbo-mode-24.svg does not have a proper viewBox.
  icons/android/turbo-mode-outline-24.svg does not have a proper viewBox.
  icons/android/top-sites-24.svg does not have a proper viewBox.
  icons/android/secure-24.svg does not have a proper viewBox.

even if those files have a viewBox, any idea why?

aminalhazwani commented 6 years ago

@bwinton this. is. so. cool. I am going to test the Android icons in Android Studio because Sebastian told me that sometimes the android:fillType="evenOdd" creates strange problems.

Also, we don't use #000, that's on me, should I just simply change the fill of the SVGs files to Grey 90 so that also the vectorDrawables use Grey 90 as a default? Thanks!

bwinton commented 6 years ago

Yes, we should definitely change the Android SVGs to Grey 90. 🙂

aminalhazwani commented 6 years ago

Ok, I changed the fill to Grey 90 a80, so an output XML is for example:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#0C0C0D"
        android:fillAlpha=".8"
        android:fillType="evenOdd"
        android:pathData="M13 4a1 1 0 1 0-2 0v7H4a1 1 0 1 0 0 2h7v7a1 1 0 1 0 2 0v-7h7a1 1 0 1 0 0-2h-7V4z"/>
</vector>

I am going to test the XMLs and add the new icons to the JSON. When I npm run test I get this error, any idea @bwinton?

Poorly-sized entries:
  icons/android/info-24.svg does not have a proper viewBox.
  icons/android/back-24.svg does not have a proper viewBox.
  icons/android/forward-24.svg does not have a proper viewBox.
  icons/android/refresh-24.svg does not have a proper viewBox.
  icons/android/stop-24.svg does not have a proper viewBox.
  icons/android/data-collection-24.svg does not have a proper viewBox.
  icons/android/delete-24.svg does not have a proper viewBox.
  icons/android/pin-24.svg does not have a proper viewBox.
  icons/android/pin-outline-24.svg does not have a proper viewBox.
  icons/android/preferences-24.svg does not have a proper viewBox.
  icons/android/turbo-mode-24.svg does not have a proper viewBox.
  icons/android/turbo-mode-outline-24.svg does not have a proper viewBox.
  icons/android/top-sites-24.svg does not have a proper viewBox.
  icons/android/secure-24.svg does not have a proper viewBox.
bwinton commented 6 years ago

Yeah, the new SVGs have to start with <svg xmlns="http:\/\/www.w3.org\/2000\/svg" width="<something>" height="<same thing>" viewBox="0 0 <same thing> <same thing>" and then whatever other attributes you want. (Uh, and those need to be in that specific order, too.)

aminalhazwani commented 6 years ago

Ok, gonna check this!

aminalhazwani commented 6 years ago

Uhm, I am not sure if that is the issue, if I compare new-24.svg that doesn't prompt any error 

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 4a1 1 0 1 0-2 0v7H4a1 1 0 1 0 0 2h7v7a1 1 0 1 0 2 0v-7h7a1 1 0 1 0 0-2h-7V4z" fill="#0C0C0D" fill-opacity=".8"/></svg>

with back-24.svg that is listed as poorly-sized entry I cannot see the difference:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.707 3.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l6.293 6.293a1 1 0 0 1-1.414 1.414l-8-8a1 1 0 0 1 0-1.414l8-8a1 1 0 0 1 1.414 0z" fill="#0C0C0D" fill-opacity=".8"/></svg>