Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for non-font-awesome icons for tabs #797

Closed
UncleSamSwiss opened this issue May 1, 2021 · 3 comments
Closed

Support for non-font-awesome icons for tabs #797

UncleSamSwiss opened this issue May 1, 2021 · 3 comments
Assignees
Labels

Comments

@UncleSamSwiss
Copy link
Contributor

Is your feature request related to a problem? Please describe.
The "problem" (if we want to call it this way) is that many adapters have started using icons different from font-awesome for their tab icon. One example is zigbee:
https://github.com/ioBroker/ioBroker.zigbee/blob/dbe52d251fca2e767ff860d4b449286ab23835c2/io-package.json#L183

See also the discussion here: ioBroker/ioBroker.zigbee#1068

Describe the solution you'd like
I would prefer if admin 5 supported something like this:

        "adminTab": {
            ...
            "icon": "zigbee.svg"
        }

This icon would have to be uploaded to the admin folder of course.

Suggestion: it would be nice if there was a requirement for it to be a "themeable" SVG icon (using the special color currentColor), so it is more in line with the FA icons of other tabs (ie monochrome). Here are examples how this can be achieved: https://github.com/UncleSamSwiss/iobroker-dev-portal/blob/1cc4d5b10083b37c95c04e326886e096a2c7aa15/express/frontend/src/components/Icons.tsx#L27
(it doesn't have to be a JSX/TSX file, the same works for pure SVG files).

Describe alternatives you've considered
The current (ugly) alternative looks like this for zigbee:
ioBroker/ioBroker.zigbee#1068

Additional context
Have a look at the many adapters that are using their own icon:
ioBroker/ioBroker.zigbee#1068 (comment)

@GermanBluefox
Copy link
Contributor

font-awesome are not supported any more in Admin5. You can use base64 svg icons with currentColor.
Here is an example: https://github.com/ioBroker/ioBroker.js-controller/blob/master/io-package.json#L324

And it will be shown as
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"> <path fill="currentColor" d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/> </svg>

@UncleSamSwiss
Copy link
Contributor Author

UncleSamSwiss commented May 5, 2021

font-awesome are not supported any more in Admin5. You can use base64 svg icons with currentColor.
Here is an example: https://github.com/ioBroker/ioBroker.js-controller/blob/master/io-package.json#L324

@GermanBluefox The example you provided is for an object. Is the same true for the admin tabs?

@GermanBluefox
Copy link
Contributor

Admin tabs may not have own icons. The adapter icon will be used for that:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants