I have a few custom icons (11 to be exact) that I added to my project using Flutter Icon. For most of these icons, everything is working as expected:
However, some of them just overflow out of their intended size, or are given a wrong size. No idea what the problem is, but here is how it looks like:
as you can see, the right side of the infinity loop is just hanging outside of its intended container (button). Also, if I try to be hacky and resize only the infinity icon, it appears to be offsetted to the right.
I can be hacky and create a custom size for the couple of troublesome icons, but I would like to know if there is something that I, or my designer (also me) can do to fix this properly.
Already Tried:
Converting to compound path.
Removing unnecessary tags such as <style> tags.
Using flutter_svg package. This works okay, but it seems to be less performant that the Flutter Icon method. My app has quite a few animations running at the same time, and animating a SvgPicture is a little bit janky.
So I haven't been able to find out why the problem is happening, but I found out how to fix it.
After uploading your custom icons' svg's into FlutterIcon you'll download a .zip file. This file contains a bunch of files, including a .ttf file, which is a font file that contains your icons. You will need to manipulate the symbols/icons in that file in order to fix the issue.
To modify the faulty symbols, you will need to download some font editing application. FontForge does the trick. Download it and open the .ttf file you got from FlutterIcon from it. Once you have it open, you'll see a window full of squares with Xs in them. These are the font's glyphs.
You now need to find the glyphs with your icons. To save yourself from a LOT of scrolling, you can go to Encoding -> Compact from the toolbar. This will hide all unused (empty) glyphs. You should now be able to see all your icons. You should have something like this:
Right click the symbol you want to fix, and click Transform.... You will then be prompted with a menu that will let you transform the symbol in anyway you want. Apply transforms on all your faulty icons until you are satisfied. Transform window looks like this:
Once you have finish all your modifications, got to File -> Generate Font.... Select the destination folder and the file name (make sure it has the same name as the .ttf file generated from FlutterIcons). Also make sure you the TrueType file type from the first dropdown menu:
Once you're done, click generate, and voila! Now you have the .ttf file with the correctly-shaped icons. If you still find that something is wrong with the icons, you can rinse and repeat this process until you're satisfied with the result.
Related
I have searched but can't find anything or don't know how to find this. Is there an existing flutter package that has icons for common file types? If I'm displaying a file list, I'd like to show associated icons for those files such as .txt, .exe, .jpg, and just about anything else you'd find on a desktop computer, if possible.
It may not be possible to get the actual associated icon. For instance, a .jpg could be associated with multiple apps but I'd be fine with just a generic .jpg file icon for this or any other file type. I just don't want to show the same material icon for every file.
Try this,
https://pub.dev/packages/file_icon
Please note that the package is not maintained.
When you create a new file without an extension in VS Code you get four horizontal lines stacked on top of one another; the bottom and the third one up is shorter than the others.
What type of file is this?
And when I setup a react-app, the .gitignore has the four-line icon by it instead of the git logo. Does this mean my gitignore isn't working? and if so, what can I do about this?
If you mean this symbol:
The icons next to filenames indicate what sort of file VSCode thinks they are. JavaScript files show JS, JSX files show the React symbol, and so on.
The lines icon mentioned in your question looks to just be the default icon for any file extension VSCode doesn't recognize - it also occurs for text files (which is what the icon looks to represent) and files that end in the nonsense extension .foobar, for example.
It's only an icon - if you've set up your Git repository properly (or run something that sets one up for you), the icon that VSCode chooses will not affect your app.
Is it possible to modify VS Code settings so that it uses the old fashion [+] and [-] signs instead of the arrows in the Explorer tree view -- see below?
I don't think it will be quite easy, most icon packs i've seen use only hiding this icons.
After some investigation, I got that these icons are called 'chevron-up' and 'chevron-down' from font called codicon. path to files which are used (codicon.css and codicon.ttf):
\vscode-master\src\vs\base\browser\ui\codiconLabel\codicon
so the idea is that you download this repo: https://github.com/microsoft/vscode
then edit css file to point to the font and icon you wish, or edit existing classes to make 'chevron-up' to be actially 'plus' sign:
.codicon-chevron-up:before {
content: "\ea60"; // plus, "\eab7" - up sign
}
and finally, build vs code on local machine
note: did not test this myself, but it should give you right direction
I have been trying numerous editors, from Inkscape, to online converters, to MS store apps, etc.
All I'm trying to do is find an easy way to create either transparent PNG files or SVG files for the activitybar icon inside of VS Code for an extension I'm working on.
Everything I've tried either totally warps the dimensions of what I create and seems to blow the image way up inside the activity bar, even though the files I'm saving as PNG are all 128px x 128px with 32 bit depth, same as another that ships with examples from https://github.com/Microsoft/vscode-extension-samples/tree/master/tree-view-sample
What I see in VS Code after specifying the path in the extension package.json:
What I am trying to get it to look like:
I've tried using SVG viewer plugins for VS Code as well, and sometimes the SVG's I've used don't even show up, even though an item does exist in the activity bar when I hover over the position it should be in.
Any modicum of help would be appreciated.
Is there an app that can change the order of images inside an icon?
Thanks!
What you'll need to do that is a resource editor. A google search will reveal many free ones out there. The restorator is a great one, but not free and over-priced IMO.
Any decent resource editor will allow you to see icons in the exe or dll and save them or replace them. I don't know of any that will allow you to reorder them, but just about any out there would allow you to save the icons out and then replace them back in the exe/dll in whatever order you'd like.
The only resource editor I know of that will allow you to re-order the embedded icons including png compressed vista icons is Resource Tuner Console.
You can change the image order using Pixelformer (an icon/bitmap editor). Import the icon, reorder the images as you wish, then export it back.
Using a resource editor is not an easy way to do this because you have to edit both ICON and ICON GROUP and I tried to do this with Resource Hacker and could not do it.
I found Easy Icon Maker is able to rearrange the order of the icons properly... it's the only icon editor that I found with this option, and I tried about half a dozen. The editor itself is not nearly as good as IcoFX (http://portableapps.com/apps/graphics_pictures/icofx_portable)
Why would you want to do this? Well there are certain times when Windows will use the first icon file that matches the size, but this may not be the color-depth that you want... for instance if you are on an older machine like Windows 2000 that doesn't support Alpha Channels then putting these at the beginning of your ICO file will cause Windows 2000 to try to render it so it results in black dots all over the image.