Search code examples
xcodeassets

How to add pngs from svg to XCode project with a shell script?


Is there a way to update the Assets of a project with tools/scripts external to XCode?

I draw my icons in Inkscape. I've recently discovered that with a simple script like this:

#!/bin/sh

tail=$(basename "$1")
name="${tail%.*}"

/Applications/Inkscape.app/Contents/Resources/bin/inkscape -d 135 --export-png ${name}@3x.png   ${name}.svg 
/Applications/Inkscape.app/Contents/Resources/bin/inkscape -d 90 --export-png ${name}@2x.png ${name}.svg 
/Applications/Inkscape.app/Contents/Resources/bin/inkscape -d 45 --export-png ${name}.png ${name}.svg

I can auto generate the 3 different pngs with appropriate name at resolutions. Much easier than point-n-click interactive route.

What I would love to do, is to add something to the end of my script that would automatically inject those 3 pngs into the Assets of an XCode Project. But I don't know how/where XCode manages those.

Full Script

The full script, derived from @Matthias 's answer (my SVG directory sits as a sibling to the project directory)...

#!/bin/sh

tail=$(basename "$1")
name="${tail%.*}"
ProjectName=myValve

Target=../${ProjectName}/Images.xcassets/${name}.imageset
mkdir -p ${Target}

/Applications/Inkscape.app/Contents/Resources/bin/inkscape -d 135 --export-png ${Target}/${name}@3x.png ${name}.svg
/Applications/Inkscape.app/Contents/Resources/bin/inkscape -d 90 --export-png ${Target}/${name}@2x.png ${name}.svg
/Applications/Inkscape.app/Contents/Resources/bin/inkscape -d 45 --export-png ${Target}/${name}.png ${name}.svg

cat > ${Target}/Contents.json << __EOF__
{
 "images" : [
  {
   "idiom" : "universal",
   "scale" : "1x",
   "filename" : "${name}.png"
  },
  {
   "idiom" : "universal",
   "scale" : "2x",
   "filename" : "${name}@2x.png"
  },
  {
   "idiom" : "universal",
   "scale" : "3x",
   "filename" : "${name}@3x.png"
  }
 ],
 "info" : {
  "version" : 1,
  "author" : "xcode"
 }
}
__EOF__

Solution

  • I don't have a copy & paste solution, but I can provide a starting point.

    I just added 3 images and the file structure looks quite easy. This is the file diff in git:

    new file:   ObjCTest/Images.xcassets/Image123.imageset/Contents.json
    new file:   ObjCTest/Images.xcassets/Image123.imageset/Image123.png
    new file:   ObjCTest/Images.xcassets/Image123.imageset/Image123@2x.png
    new file:   ObjCTest/Images.xcassets/Image123.imageset/Image123@3x.png
    

    So you don't have to touch xml stuff like the project.
    And Contents.json isn't complicated either:

    {
      "images" : [
        {
          "idiom" : "universal",
          "scale" : "1x",
          "filename" : "Image123.png"
        },
        {
          "idiom" : "universal",
          "scale" : "2x",
          "filename" : "Image123@2x.png"
        },
        {
          "idiom" : "universal",
          "scale" : "3x",
          "filename" : "Image123@3x.png"
        }
      ],
      "info" : {
        "version" : 1,
        "author" : "xcode"
      }
    }
    

    Xcode 6 has a couple of options that you can set in the Asset editor. If you need those, change them and see how Contents.json changes.