simple-icons / simple-icons-font Goto Github PK

Is it really necessary to use an <i> tag when you want to use a simple-icon (see ⬇️)?

I know FontAwesome "recommends" it (and maybe others as well), but I would say pretty much any element that is given the class .simpleicons should be converted into a simple-icon.

As one can see in the Travis CI build there is an issue with new SVG that are being added the Simple Icons for the font building pipeline we use.

I'm not sure about the exact details of the issue, whether it is a problem with the SVGs or with our tooling. On the one hand many of the SVGs causing trouble also don't load properly in my editing software. On the other hand these SVGs are all compressed using SVGO or SVGOMG...

I worked around this problem earlier by patching the icons that were a problem for this project but that is a bit much work (though I think we would accept pull request for it over in the main repository if anyone wants to do it...).

A solution would be help in order to keep this project up-to-date with the main project. Either fix the pipeline we use or make sure the SVGs added in the main project are compatible with the tooling here.

.si {
	display: inline-block;
	font-family: 'Simple Icons', sans-serif;
	font-style: normal;
	line-height: normal;
	vertical-align: middle;
}

PS: Unless I'm just being a complete dumb-dumb, the actual /font/ folder appears to be missing from the GitHub repo? I had to go to unpkg.com to find the font files and download them.

Kind of issue

• [x ] Improvement
• Bug
• Other, namely:

Description

Can we change the size in simple-icons-font? In materialdesignicons I can do
<i class="mdi mdi-facebook mdi-48px" aria-hidden="true"></i>
si-48px is not working.

If you want to use this library to add a few icons, it becames a lot of overload in page load size because the font adds all the icons. It would be great if we can expose the build process to customize it for a few icons filtering by icon slug.

As per #14 (comment) it appears that the font ligatures are not being displayed at all in Firefox 68.0 (64-bit).

To avoid manual updates like #189

This issue provides visibility into Renovate updates and their statuses. Learn more

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update all dependencies (@prettier/plugin-pug, husky)

• Check this box to trigger a request for Renovate to run again on this repository

Hi,

I'm using simple-icons-font in one of projects.

Unfortunately, after update to 4.6.0 and npm install, each time I'm getting:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `is-ci || husky install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\tomek\AppData\Roaming\npm-cache\_logs\2021-01-16T02_55_59_755Z-debug.log

This wasn't issue for 4.5.0, but after upgrade it started. I'm using postinstall in my project.

As per #12 (comment) we should find a solution for icons that are too large/complex (e.g. the Elsevier icon).

Whether that is somehow getting it in the font (e.g. by reducing the complexity) or through documentation is open for discussion.

Relatedly we should look into proper error messaging when building the font and, if we stick with removing icons that are too large from the font, find a proper way to configure that, probably in an external file(?)

Currently this repository has the default labels from GitHub, I propose updating them to be in line with the labels for the main repository. This has pretty low priority. I propose the following:

Add new labels: abandoned, docs, meta
Substitute for a out of scope label: wontfix, invalid
Labels that are definitely irrelevant to this repository: icon outdated, new icon, website
Additional labels that apply to this repository: bug, enhancement
Not sure labels (I don't think they're necessary): question, awaiting reply, release

For completion I'm also considering using the exact same colors as the main repository for the labels that are the same so it is easier to recognize them across repositories as well 🤔

We could add our font files to Assets when we release them.

See the Assets section at https://github.com/simple-icons/simple-icons-font/releases.

Just like Fira Code does https://github.com/tonsky/FiraCode/releases.

I published a wrapper for the simple icons in the flutter community, pub.dev.
The library works by running npm install simple-icons-font and converting the SimpleIcons.ttf into a dart class.

To have a fully automated build, it would be create, if we could work out a synergy, where this repo provides an event my github action can listen to, every time a new version is released (to npm).

Hey guys,
I'm not sure how to use font. I installed it within Angular project and I want to use now it. I assume I did proper importing to the main SCSS file.
Could you provide an example how to use it?

Thanks in advance.

Currently selecting an icon in text is a bit clunky in my opinion, see ⬇️

I'm not at all familiar with icon-font-buildr but it seems to be the result of using ligatures. Perhaps this can be improved in some way?

Alternatively we might consider adding pointer-events: none to the .simpleicons class to discourage selecting the icons. But I'm not sure if that is really a good idea... 🤔

We should look into including the DISCLAIMER.md of the main project in the published version of this package. I think we should be able to just copy the file from the locally installed version of simple-icons in a prepublish step to include it in the release.

Would be interesting to have a toggle, besides light/dark background, on the test page that switches between:

• The class variant and the ligature variant
• Black icons and brand colored icons - #43

Kind of issue

• Improvement
• Bug
• Other, namely:

Description

When using the font in LaTeX, the top of the glyphs are aligned below the baseline. (See ineshbose/simple-icons-latex#2)

This is also confirmed in the browser. Just use the following preview/html/testpage.pug

doctype html
html
  head
    meta(charset='utf-8')

    link(href='font/simple-icons.css', rel='stylesheet', type='text/css')
    link(href='preview/assets/style.css', rel='stylesheet', type='text/css')

    script(src='preview/assets/script.js')

body
  header
    h1 Icon font test page

  .buttons-list
    button.background-mode Dark background
    button.icons-color Colorless icons

  p
    each icon in icons
      | i
      i.si.si--color(class='si-' + icon.slug, title=icon.name)

Kind of issue

• Improvement
• Bug
• Other, namely:

Description

I provide the simple_icon library for flutter and some of the users noticed that there seems to be a positioning error when it comes to the generated ttf file. (related github issue)

Can you provide information regarding the build process of the ttf file and/or look into the positioning of eg. apple and play store icon?

Following up on #14, if there is interest we are open to adding a OTF version of the font to the package and would appreciate any help with implementing this.

As per simple-icons/simple-icons#1540 (comment), what are our options of adding support for .ttf, .woff, .woff2 (and other?) font types?

Kind of issue

• Improvement
• Bug
• Other, namely:

Description

This fontset only has icon glyphs, so when you load it in certain text environments, there are warnings about missing characters such as space, tab, carriage return, etc. Refer ineshbose/simple-icons-latex#18 (comment)

Do you think we can add this to the font?

As discussed in simple-icons/simple-icons#1307 we need to figure out a way to sync up releases of the primary NPM package with the font version. I'm currently thinking of two different approaches: 1) publish an update for simple-icons-font through the CI of simple-icons; and 2) build the font upon install.

Other suggestions and comments are welcome 😃

Publish through CI

This is the straightforward solution (in terms of how to approach this, implementing isn't that straightforward). We would need to find a way to extend the .travis.yml configuration of the main repository to publish this (and potentially other packages) when an update for the simple-icons package is published.

One way of doing this is through a bot/GitHub Actions (relevant comment).

Related issues to this are: simple-icons/simple-icons#898, simple-icons/simple-icons#770, and simple-icons/simple-icons#982

Build the font upon install

I'm not 100% sure how to achieve this, but I'm pretty sure it is possible to run a script when a dependency is installed with npm install. For example, I know gulp-imagemin runs some scripts when installing it as a dependency.

In this scenario we would add run the build script when the simple-icons-font is installed as a dependency and have simple-icons listed a dependency for simple-icons-font such that it always uses the @latest version.

This significantly simplifies the release process for simple-icons-font. The main drawback is that it is an unconventional way to provide users with updates and it might be confusing for people using simple-icons-font as a dependency. Basically, to update the package and get the latest icons one needs to npm install simple-icons-font again.

Another drawback is that I think this would make it so the package as provided by CDNs is never updated, so new icons won't become available there... 😞

Again, I don't know how feasible this approach is. I will try to get something like this working as soon as possible and report my findings here 👍

Add some general documentation on how to use the font, in a Getting started-style, to the README. If more documentation is needed I propose putting it in a new docs/ folder.

As per a discussion in #6, we should consider minimizing the CSS of the package, especially if #39 gets merged.

Following simple-icons/simple-icons#3979, I think we should specify a minimum NodeJS version in this project's package.json.

is the composer package meant to include pre-compiled css and font files? the instructions here were pretty spartan and suggestive as such. it would be pretty great if so. or are we meant to go in there and deal with npm related stuff too? asking for a friend who is not a fan of front end and who is also me.

Following discussion in #66 (comment), add also Javascript files configuration for .editorconfig file.

Following discussion, this is currently configured in simple-icons/release-action. Just we must make sure that permissions of .husky/pre-commit file are the same across different systems (see this).

I'm wondering whether we should use shorter class names, this has several obvious advantages and apart from backwards compatibility no real downsides - luckily we still have two major release for breaking changes at this point (the releases corresponding to simple-icons v3 and v4).

Following Font Awesome's fa class and fa- prefixed classes I suggest we go with the si class and si- prefixed classes. The only thing I'm unsure about is the "color modifier" class (currently simpleicons--color), I'm not sure if si--color works so well but I would be happy with it if there are no other suggestions as I prefer si over simpleicons as a prefix.

Thoughts?

\cc @mondeja

I'm getting a deprecation warning or this line in VS Code (specifically on ucs2.decode):

@deprecated
since v7.0.0 The version of the punycode module bundled in Node.js is being deprecated. In a future major version of Node.js this module will be removed. Users currently depending on the punycode module should switch to using the userland-provided Punycode.js module instead.

'ucs2' is deprecated

So I think we should look into updating this.

When I add an icon between em tags the geometry seems to wrap a bit to the left:

Could this be solved adjusting the font original properties defined in the source SVG template? Or we must add font-style: normal to prohibit explicitly from made them italic as discussed in in #161?

Have a look at the image below, you might see the logo for the C and R programming languages quite often 😕

This is because the ligature for e.g. "CoronaRenderer" (highligted in the image) contains a C and 4 R's and instead of showing the ligature for it shows 1 for the C programming language and 4 for the R programming language.

I'm not sure if fonts can be somehow tweaked to look for the longest ligatures first... One interesting observation is that the different browsers show different icons differently. For example the Corona Renderer logo doesn't show in Firefox (below) but works in Chrome.

The utilities file (lib/utils.js) should be updated to reflect the recent changes made in simple-icons/simple-icons#1439

• TTF
  • Description.
  • Version.
  • URL.
• WOFF (inspector)
• WOFF2?

Instead of relying on the (copied) titleToFilename function in the lib/utils.js file (which we have to keep in sync with the main repository) I propose we switch to using the newly introduced icon.slug property.

Blocked by #20 as we need the latest version of Simple Icons.

Currently the font supports three ligatures (for most) icons, limiting this to just one can reduce the size of the output font. It's not much, as the table below shows, but it only becomes more beneficial over time. Also, I don't really see a reason to support three input values for the same icon, especially with #6 in mind.

Kind of issue

• Improvement
• Bug
• Other, namely:

Description

Hello! I've noticed an issue with the TTF font.
When using the font in Flutter, there is a small offset when rendering the font. There is a small gap at the top and it goes a bit out of bounds at the bottom.
I'm not sure where the problem is exactly, but I did try to create a TTF font with icomoon.io manually with a few of the Simple Icons SVGs and it doesn't have that problem.
So there are some differences in how both TTF are generated. Any ideas?

I've tried with the TTF files in the Github, v7 and v9, both with the same problem.