matomo-org / matomo-icons Goto Github PK

Source files for the icons in Matomo

Python 72.65% Shell 25.71% PHP 1.64%

matomo-icons's Introduction

Matomo-Icons

This reposistory provides the source files for the icons in matomo and the scripts used to resize them to a common size.

Contributing

An icon is missing or you have a better one? Create a new issue or, even better, open a pull request. You can find a up-to-date list of all improvable icons on Travis.

All source files except those in devices, flags, searchEngines and socials need to have a second file called iconname.ext.source that mentions where the image is from.

Naming conventions

icon type	example	possible names
brand	Apple	Device detection in Matomo Administration page
browsers	FF	https://github.com/matomo-org/device-detector/blob/master/Parser/Client/Browser.php#L37
devices	smartphone	Device detection in Matomo Administration page
flags	at	all except un and gb-*
os	WIN	https://github.com/matomo-org/device-detector/blob/master/Parser/OperatingSystem.php#L38
plugins	flash	files in plugins/DevicePlugins/Columns/
searchEngines	google.com	https://github.com/matomo-org/searchengine-and-social-list/blob/master/SearchEngines.yml
SEO	bing.com	https://github.com/matomo-org/matomo/tree/4.x-dev/plugins/SEO
socials	facebook.com	https://github.com/matomo-org/searchengine-and-social-list/blob/master/Socials.yml

File Formats

Ideally all source files should be SVGs or high resolution (>100px) PNGs. As this is not always possible, JPGs, GIFs and (even multiresolution) ICOs are supported.

matomo-icons's People

Contributors

Stargazers

Watchers

Forkers

jamesandersonjr fengkaijia piwikpro spyfu tufanbarisyildirim dasest404 pir8eye bunnyfield zimocode paulchan2008 starker3 leifengblvd qpc-github quantum-platinum-cloud d34th101 digital-peak

matomo-icons's Issues

Improve brand icons

There are still many brands left without or with unrecognisable small icons.

WebOS Icon Update

https://github.com/matomo-org/matomo-icons/blob/master/dist/os/WOS.png

LG Electronics fully acquired WebOS. But the icon file has the HP logo inside.

https://en.wikipedia.org/wiki/WebOS
https://www.webosose.org/

New Logo: https://en.wikipedia.org/wiki/WebOS#/media/File:LG_WebOS_New.svg

Add "pseudo-unit-test"

This would just be a simple bash script that would check the contributing "rules" (that I still need to write if I have some time).
e.g:

do all manually collected files have a file mentioning the source (similar to https://github.com/piwik/piwik-icons/blob/master/src/os/AIX.png.source)
are any src images smaller than the target size
does every folder have a "unknown" icon (empty png)

Browser icon missing

It looks like LieBaoFast browser doesn't have an existing icon:

https://devicedetector.lw1.at/Mozilla%2F5.0(Linux;Android%205.1.1;OPPO%20A33%20Build%2FLMY47V;wv)%20AppleWebKit%2F537.36(KHTML,link%20Gecko)%20Version%2F4.0%20Chrome%2F43.0.2357.121%20Mobile%20Safari%2F537.36%20LieBaoFast%2F4.51.3

"clientInfo": { "type": "browser", "name": "LieBaoFast", "short_name": "LF", "version": "4.51.3", "engine": "WebKit", "engine_version": "537.36" },

LF.png isn't there in the browsers folder.

Opera Mini, Opera Beta and Opera/Opera Mobile icons all have slightly different dimensions

The Opera icons in this repository are all slightly different in the way they are sized. On the scale these icons are showed, it is quiet visible:

Mini: https://github.com/piwik/piwik-icons/blob/master/dist/browsers/OI.png
Opera (Mobile): https://github.com/piwik/piwik-icons/blob/master/dist/browsers/OM.png
Opera Beta: https://github.com/piwik/piwik-icons/blob/master/dist/browsers/ON.png

Also, the Opera/Opera Mobile icon doesn't seem to be the official icon as the shade on the right starts to low and is to sudden.

Additionally, is the Opera Developer logo not used by Piwik?

imagemagick -trim cuts away part of the logo

Unfortunately the -trim imagemagick command I use for removing white borders around the icons always cuts away the color at the border of the icon. As a result some icons end up too small:

Maybe this is a solution: https://www.imagemagick.org/Usage/crop/#trim_color

Unify name of placeholder icon and use proper icon instead of empty png.

At the moment the placeholder icon (Transparent png) has multiple different names, which is bugging me for some time.

placeholder_icon_filenames = {
    "brand": "unk.png",
    "browsers": "UNK.png",
    "devices": "unknown.png",
    "os": "UNK.png",
    "searchEngines": "xx.png",
    "socials": "xx.png"
}

It would be nice to rename them to one common name (e.g. unk.png).

This also needs to be changed in Piwik (functions for generating icon path and in tests) and in the ReferrersManager-Plugin (see sgiehl/piwik-plugin-ReferrersManager#11)

Missing icon for wearable devices

I am using latest Matomo release 3.14.1. If you look at the block with device types, wearable devices are shown with a broken icon.
Image element markup: <img title="Wearable" alt="Wearable" src="plugins/Morpheus/icons/dist/devices/wearable.png">.

change color of all matomo Icons

I need to change the clors of all matomo icons, i update the calss at the navigator like this:
[class^="icon-"], [class*=" icon-"] { font-family: 'matomo' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #ff66054; }

but i did succed to do change on the server , any idea ?

compare browser-icons to alrra/browser-logos

Thanks to @Studio384 I found the following repo, which hosts and maintains high quality browser icons:

https://github.com/alrra/browser-logos

Maybe we should compare their icons with our or even outsource the collection to them (no need to replicate the afford.