5

I'm attempting to use PDF files as icons in an app I'm working on. The issue I'm encountering is I'm getting inconsistent tint colors.

If I set a button image from interface builder, the icon image shows up black at runtime. Every time. Regardless of what I attempt to set from interface builder.

I tried setting my button icon image via code and instead of showing up black, it's white:

let myGraphicFile = UIImage(named: "myPDFImage")
let myButtonImage = myGraphicFile?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
myButton.setImage(myButtonImage, forState: .Normal)

From code, regardless of what I attempt to set the tint to, it's always white from code.

I discovered this post relating to Xcode 6.x, but I think it might be dated, as I'm able to partially do it, but I can't set the tint.

Use PDF in XCode for an AppIcon (.appiconset collection)

I create the icons in Inkscape, save as PDF 1.5. I add the file to Images.xcassets. In Images.xcassets' attributes inspector, I'm setting:

Devices to Universal

Scale factor to Single Vector.

Summary: I can get it to show up and scale properly, but it's either black from interface builder or white from code. I suspect I'm missing something re: how to save the file from Inkscape.

Thank you for reading. If you have any suggestions, I welcome them.

Community
  • 1
  • 1
Adrian
  • 16,233
  • 18
  • 112
  • 180
  • You need to set the rendering mode to always original – Leo Dabus Feb 10 '16 at 03:43
  • Or setBackgroundImage instead – Leo Dabus Feb 10 '16 at 03:45
  • @LeoDabus Thank you for your suggestions. I tried both of those and now the image that's displaying on the button is black. I can change the background color of the button, but the image, whether `image` or `backgroundImage` display black. – Adrian Feb 10 '16 at 04:15
  • With iOS, Xcode generates the individual @1x @2x @3x files at build time as opposed to OSX doing it on the fly. Perhaps deleting derived data (or doing a clean build `CMD + Shift + K` then a normal build might fix it? – Adrian Sluyters Feb 10 '16 at 06:36

1 Answers1

9

I have figured out how to create vector icons with Inkscape. When you use PDFs to display icons in iOS, you need to alter the Attributes Inspector for your icon in xcAssets as follows:

1) Drag the PDF into xcAssets

2) Set devices (I did Universal and it worked fine)

3) If your PDF icon is under 1x, 2x, or 3x size class, drag it to Universal and delete the rest of them.

4) Set Scale Factors to Single Vector.

5) Render as Template Image.

enter image description here

Once it's configured there, then you just treat it was you would any other image in interface builder. It's essentially the same thing I was doing in code, but I don't think it gets done in code...it's gotta be done on xcAssets where the image lives. It's my understanding iOS renders vector images for the size class at run time. I think by attempting to tweak it in code wasn't working because the image had already been rendered.

If anyone has any questions on this, I found this link helpful in resolving my issue.

Additionally, this post covers the topic, too. https://stackoverflow.com/a/25804358/4475605

Community
  • 1
  • 1
Adrian
  • 16,233
  • 18
  • 112
  • 180
  • 2
    This works for ordinary images, but I remark that the actual AppIcon can not be set this way. You still need non-vector images – edwardmp Jul 10 '16 at 22:36
  • @edwardmp There are scripts laying around on Github for that. You just need to feed them a 1024x1024 image and they'll spit out all the icon sizes you need. – Adrian Jul 25 '18 at 20:48
  • I'm unable to find the Scale Factors option in Xcode v10.2. The closest thing I can see is **Scales**, which has options for 'Single Scale' (i.e. All) and 'Individual Scales' (i.e. 1x, 2x, 3x); however, that doesn't mention anything about Vector, and doesn't seem to scale the images when 'Single Scale' is selected. Any idea where this option is located now? The resources I'm checking for are vector PDFs, so that's not the issue. – TheNeil Apr 30 '19 at 00:17