In mobile view, using the entire icon may not always make sense, as can be seen with some of the icons here:
To allow for an alternate icon for mobile view, let's build out the following feature.
In the SVG, within the layer for a particular icon (say mobile-inverts), there can be a sublayer called "mobile" (without quotes). This sublayer contains the graphic elements that should be included within the mobile view for that icon.
If an icon doesn't contain the mobile sublayer, then the code will just show the entire icon for the mobile view.
If an icon does contain the mobile sublayer, then just the contents of that sublayer should be included in mobile view.
If an icon does contain the mobile sublayer, then the contents of that sublayer should be hidden in tablet or desktop view.
Setting up the environment
As a first step, you'll need to create an svg with a mobile view sublayer in it. To do so, in Inkscape, open one of the svgs and add a mobile sublayer to a few of the icons. Populate those mobile sublayers with simple graphical elements (it doesn't have to look good - we are just trying to get functionality going here)
In mobile view, using the entire icon may not always make sense, as can be seen with some of the icons here:
To allow for an alternate icon for mobile view, let's build out the following feature.
Setting up the environment