FLUID-6142: convert icons used in Infusion to use SVG icons

Description

Currently Infusion has a mix of image and font icons. A recent exploration has lead to the possibility of switching these to all use SVG icons.

This work should include the following:

• Compiling a directory of SVG icons used in Infusion
• Creating a build task for generating the SVG sprite sheet
• Replacing existing icons with SVG icons ( including styling and markup changes as needed )
• Using a polyfil such as svg4everybody for IE 11 support.

(See: http://fluid.2324889.n4.nabble.com/SVG-Icons-tt9952.html )

Comments

• Justin Obara commented 2017-03-07T10:00:34.217-0500

  Icons used in Infusion. There probably should be separate builds tasks for icons that are used for demos as opposed to framework and components. If possible should modularize so that only icons for components / framework items that are requested are included.

  Inline Edit

  • pencil

  Keyboard a11y

  • star ??

  Overview Panel

  • asterisk ( fluid logo )
  • demo code icon
  • api icon
  • design icon
  • get infusion icon

  Prefs framework

  • text size icon
  • text style icon
  • line spacing icon
  • small line spacing icon
  • large line spacing icon
  • contrast icon
  • table of contents icon
  • emphasis icon
  • text to speech icon ( currently missing )
  • simplify icon
  • reset icon
  • small A icon ??
  • large A icon ??
  • icon ( future: for stepper )
  • + icon ( future: for stepper )

  Reorderer (layout reorderer)

  • lock icon ?
  • move icon ?

  UI Options

  • Infusion Debugging icon

  Uploader

  • + ( add files icon )
  • x ( remove file / close icon )
  • ! ( warning icon )

• Justin Obara commented 2017-03-14T08:51:57.854-0400

  Unfortunately at this time it does not seem like it will be possible to use SVG icons in Infusion. The primary reason is that we make use of HTML templates for the preferences framework and other components. However, the method of referencing external SVGs through <use> would require that an URL be provided in the template. However, this URL would need to be relative to the document that the template was inserted into.

  See: http://lists.idrc.ocad.ca/pipermail/fluid-work/2017-March/010329.html

  Perhaps when we have a solution for URL rebasing in templates or other mechanisms for easily including SVGs that can be styled, we can re-investigate using SVG icons.

• Justin Obara commented 2021-06-22T15:43:48.292-0400

  This was further discussed in the Fluid-General Matrix room on Wed May 12, 2021. The general suggestion was to inline the SVGs into the template or page and refer to them with <use>. A similar approach was used on the WeCount project site.