Allow use of different icons via the config.yml file

[binaryben]

UPDATE: See below for a temporary workaround. Ideally someone can still make this happen via the config.yml file instead though.

 

---

Original Request

- Do you want to request a feature or report a bug?

Feature request

- What is the current behavior?

All icons for collections are the same. It is hard to quickly differentiate if there is a large number of collection types.

- What is the expected behavior?

Possibly through using something like font awesome instead of SVG's, allow developers to change the look of the icon next to each category in the side bar.

- Please link or paste your config.yml below if applicable.

See the addition of the icon attribute below as an example:

collections:
  - name: settings
    label: Settings
    icon: fa-cog
    files: 
      - label: Global Settings
        name: global
        file: global-settings.yml

Many users probably have font awesome cached in their browser as well if that helps.

---

 

Temporary Solution & Example of Output

For reference, I have added font awesome css to my site and used the web inspector to manually change the icons to see if it works. SPOILER: IT DOES! (as you would expect..)

So far all I had to do was replace the relevant SVG elements with the following:

<i class="fa fa-<<icon name>> fa-fw" aria-hidden="true"></i>

I did this by using the following javascript code placed after the react app:

<script>
    icons = [
      {"name": "cal","fa": "calendar"},
      // ...
      {"name": "settings","fa": "cogs"}
    ]

  function iconify() {
      icons.forEach(function(item) {
          var selector = "a[href$='" + item.name + "'] .nc-icon span";
          var loc = document.querySelector(selector);
          var i = document.createElement("i");
          i.classList.add("fa", "fa-fw", "fa-" + item.fa);
          i.setAttribute("aria-hidden", "true");
          if (loc) {
              while (loc.firstChild) loc.removeChild(loc.firstChild);
              loc.appendChild(i);
          }
      })
  }

  var observer = new MutationObserver(function(changes) {
      iconify();
  });

  var init = new MutationObserver(function(changes) {
      var exists = !!document.querySelector(".nc-app-main div");

      if (exists) {
          iconify();
          observer.observe(document.querySelector('.nc-app-main div'), {
              childList: true
          });
          init.disconnect();
      }
  });

  init.observe(document.querySelector('body'), {
      childList: true
  });
</script>

...and put the following in my HTML header:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://unpkg.com/netlify-cms/dist/cms.css" rel="stylesheet" />
<style>
    .nc-collectionPage-sidebarLink i {
        font-size: 19px;
        line-height: 24px;
        margin-left: -1px;
    }
</style>

... which results in this:

This is exactly the type of output I am hoping for from this feature request. Unfortunately I don't have any time for a little while to try and integrate these better myself, but this might help someone else in the mean time?

P.S. This workaround only works in modern browsers due to use of MutationObserver. I'm also not sure how efficient it is.. feedback appreciated!