etpinard/ plotly.js-add-custom-icons

## plotly.js-add-custom-icons
Add custom svg icons to plotly.js

## README.md

      
    Raw
  

              README.md
            
          
    Add custom svg icons to plotly.js

0. Setup


Clone this gist
cd into it
Run npm i

1. Add a glyph to the plotly.js source icon file


Open up node_modules/plotly.js/src/font/ploticon/ploticon.svg
Add a <glyph /> tag.

For example, a
coffee
mug icon would look like:
<glyph glyph-name="coffee" d="M1600 640q0-80-56-136t-136-56h-64v384h64q80 0 136-56t56-136zm-1664 768h1792q0 106-75 181t-181 75h-1280q-106 0-181-75t-75-181zm1856-768q0 159-112.5 271.5t-271.5 112.5h-64v32q0 92-66 158t-158 66h-704q-92 0-158-66t-66-158v-736q0-26 19-45t45-19h1152q159 0 271.5 112.5t112.5 271.5z"/>
2. Compile the new icon into a custom plotly.js bundle


cd into node_modules/plotly.js/
Run npm i
Run npm run build

3. Use your new icon

in for example to add a custom mode bar button to your chart.
<html>
<body>
  <div id="graph"></div>

  <script type="text/javascript" src="node_modules/plotly.js/dist/plotly.js"></script>
  <script>
    Plotly.plot('graph', [{
        y: [2, 1, 2]
    }], {
        title: 'my chart'   
    }, {
        modeBarButtonsToAdd: [{
            name: 'custom button',
            icon: Plotly.Icons['coffee'],
            click: function() {
                console.log('hello world');     
            }
        }] 
    });
  </script>
</html>

  
## package.json
{
  "name": "plotly.js-add-custom-icons",
  "version": "1.0.0",
  "description": "add custom svg icons to plotly.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Étienne Tétreault-Pinard",
  "license": "MIT",
  "dependencies": {
    "plotly.js": "^1.12.0"
  }
}
	{
	"name": "plotly.js-add-custom-icons",
	"version": "1.0.0",
	"description": "add custom svg icons to plotly.js",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "Étienne Tétreault-Pinard",
	"license": "MIT",
	"dependencies": {
	"plotly.js": "^1.12.0"
	}
	}