[gnome-user-docs] Use `inkscape -i` for the status icon exporter & fix up some icons

[Shaun McCance <shaunm src gnome org>]

commit bf5b1997de5a24970ebf9e6b336290e11c576ca4
Author: Shaun McCance <shaunm redhat com>
Date:   Tue Mar 9 11:45:27 2021 -0500

    Use `inkscape -i` for the status icon exporter & fix up some icons

 gnome-help/topbar-icons.sh  | 48 ++++++++++++++++++++++++++++++++++++++++++++-
 gnome-help/topbar-icons.svg | 23 +++++++++++++---------
 2 files changed, 61 insertions(+), 10 deletions(-)
---
diff --git a/gnome-help/topbar-icons.sh b/gnome-help/topbar-icons.sh
index 5eb6201c..9c487d8d 100755
--- a/gnome-help/topbar-icons.sh
+++ b/gnome-help/topbar-icons.sh
@@ -1,8 +1,54 @@
 #!/bin/sh
 
+# Hello. This script splits topbar-icons.svg into a bunch of smaller SVGs under
+# C/figures. (None of these images should need to be translated, except possibly
+# to make RTL variants). These are primarily used on status-icons.page, but may
+# be used elsewhere. The source symbolic icons aren't really appropriate for use
+# inline on pages. They assume they will be recolored by Gtk's symbolic icon
+# machinery, and they are often a gray that is washed out and hard to see on
+# both white and black backgrounds.
+#
+# We provide the icons for both regular GNOME and GNOME Classic. We select these
+# using Mallard Conditionals in the page files. Most of the source icons come
+# from adwaita-icon-theme, but a few ship with gnome-shell.
+#
+# To add an icon:
+# * Open topbar-icons.svg in Inkscape or another vector editor.
+# * Place the icon in rounded rectangles, both black for normal and gray for
+#   Classic. There should be some blank rectangles waiting for you. The gray
+#   rectangles for Classic are #f6f5f4 (HIG Light 2).
+# * The icons might have gray, green, orange, or red bits. Otherwise, they
+#   are the foreground color. Color the normal parts of the icon white for
+#   the black background, and black for the gray background.
+# * The gray parts of the icon are done with transparency. Leave that alone.
+# * Color the green parts (class="success") #33d17a (HIG Green 3).
+# * Color the orange parts (class="warning") #ff7800 (HIG Orange 3).
+# * Color the red parts (class="error") #e01b24 (HIG Red 3).
+# * EXCEPTION: Both media-record and screen-shared get colored oranage, even
+#   tho the source icons are uncolored. gnome-shell special-cases these two
+#   and recolors them differently, so we do too.
+# * Group the icon with its rectangle. To do this in Inkscape, select all
+#   the shapes you want (either with rubberbanding or Shift+click), then
+#   click Object->Group (Ctrl+G).
+# * Give that group an ID. The ID will be used as the output filename.
+#   To set an ID in Inkscape, use the Object Properties dialog, which you
+#   can find under the Object menu.
+# * Run this script.
+# * Add any new files to Makefile.am and to git. Note that topbar-icons.svg
+#   has some images that we don't currently use. Feel free to just delete
+#   those from your working tree.
+
+
 ids=$(grep -o 'id="\(classic-\)\?topbar-[^"]*' topbar-icons.svg | sed -e 's/id="//')
 
 for id in $ids; do
     echo $id
-    rsvg-convert -i $id -f svg topbar-icons.svg > ${id}.svg
+    ## Faster, but seems to drop paths and do weird offsets:
+    # rsvg-convert -i ${id} -f svg topbar-icons.svg > C/figures/${id}.svg
+
+    ## If you have Inkscape installed in a traditional way:
+    # inkscape -j -l -i ${id} -o C/figures/${id}.svg topbar-icons.svg
+
+    ## If you use an Inkscape flatpak:
+    flatpak run org.inkscape.Inkscape -j -l -i ${id} -o C/figures/${id}.svg topbar-icons.svg
 done
diff --git a/gnome-help/topbar-icons.svg b/gnome-help/topbar-icons.svg
index 0dd4471b..edbef17b 100644
--- a/gnome-help/topbar-icons.svg
+++ b/gnome-help/topbar-icons.svg
@@ -233,8 +233,8 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="5.481068"
-     inkscape:cx="244.85238"
-     inkscape:cy="99.034024"
+     inkscape:cx="252.33886"
+     inkscape:cy="193.90605"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      inkscape:document-rotation="0"
@@ -1319,16 +1319,16 @@
          style="fill:#ffffff;stroke-width:0.264583" />
     </g>
     <g
-       id="g6378">
+       id="classic-topbar-thunderbolt-acquiring">
       <rect
          style="fill:#f6f5f4;stroke-width:0.529"
-         id="classic-topbar-thunderbolt-acquiring"
          width="7.4083333"
          height="7.4083333"
          x="42.333332"
          y="0"
          rx="1.0583333"
-         ry="1.0583333" />
+         ry="1.0583333"
+         id="rect205" />
       <g
          fill="#474747"
          id="g6"
@@ -3547,7 +3547,7 @@
        d="m -20.6375,62.441664 v 6.879167 h 13.7583336 v -6.879167 z"
        fill="#e01b24"
        id="path5527"
-       style="stroke-width:6.87917" />
+       style="stroke-width:6.87917;fill:#e01b24" />
     <path
        class="error"
        d="m -22.224998,53.445832 v 7.672916 h 15.3458316 v -7.672916 z"
@@ -3755,7 +3755,7 @@
          
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.529167;marker:none"
 />
     </g>
     <g
-       id="g6085">
+       id="topbar-battery-level-40-charging">
       <rect
          style="fill:#000000;stroke-width:0.529"
          id="rect2388"
@@ -5430,8 +5430,8 @@
        id="rect2020"
        width="7.4083333"
        height="7.4083333"
-       x="42.333332"
-       y="110.06667"
+       x="41.804165"
+       y="110.59583"
        rx="1.0583333"
        ry="1.0583333" />
     <rect
@@ -6400,5 +6400,10 @@
          fill="#474747"
          id="path2546" />
     </g>
+    <path
+       class="success"
+       d="M -21.431269,29.104166 V 40.216665 H -4.7624998 V 29.104166 Z"
+       id="path1955"
+       style="fill:#f6f5f4;fill-opacity:1;stroke:none;stroke-width:5.55625" />
   </g>
 </svg>