コンポーネントのアイコンを設定しよう

こんな編集ページでよく表示されてるコンポーネントの雷マークを
梅干しに変えられる。
f:id:kyuhee:20190124014445p:plain

1. SVGファイルを生成

f:id:kyuhee:20190124014730p:plain

2. ソース修正

f:id:kyuhee:20190124015037p:plain

タグを消して下記のタグを入れる
<image x="0" y="0" width="120px" height="120px" 
xlink:href="data:image/png;base64,(ここよ)"/>
②(ここよ)のところにイメージをbase64でencodeしたテキストを入れる

base64でencodeするサイト
www.base64encode.org

大きいイメージだとテキストも長くなってしまい、開発者コンソールで書けなくなっちゃうので
イメージをできる限り小ちゃくしてエンコードしましょう。


ex)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<image x="0" y="0" width="120px" height="120px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAIAAABKoV4MAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABHbSURBVFhHhZiHV1PZvsf5W9676907V8exDwiKwggCVgREEKSEkAChJYSiFOlIFbmgQKgB0kgCJLRAgADSBEVAioWi1JB2eoN5h7neNzP3zZv3XVlZ66x1zvn89t6/33f/9rH6+f/R4b/+D490QB5SyCEBHaBGbOs1Nl1JjBfiU2XYmzr8fSv2qQtZ78H2Zglwm6LvoR/59Q1/rD/DH9C4Q4o6wEnUSJg2iL1FYnMCX9UQK2piUYZPPiN0acRQFjlcQOnyqaHcg+FcciQPGymBX9eja6MErD84wA8PqT+J4M/wFEUQlq/Y52FsRoTpirD+dLzvCaFNpwZyqFdF5FgBOZJDjubir4qJqQryVQk1mEcN55C6fLw3Fx/9B76oxncXScRMj+LbG/+X/hBP335AEQC0NoqPvUDb4vFWDtUWRXYmkv0ZlDb7sC+TZpCjheRgNjmUiw8UkLoSYriUHCymBgvI4VKst5DsTCWHCtEJAfpJR0C7Bwfkt3f/Xn+Ap5eYgPfB9+2W7mS8NYpQRJPtsQcqPs0mRorJ0TJisIjU5pFDOZTuKd6XS2jySU0O0Z9H9ucfDBZQQ6XEYCku51PdqRQd2UgFuqDGTV//MIJ/wx/ScAoxQvNKpDsZEociLSxczCBEwaQsAunKhAef42NV2FsFPlhGdqfQY8WnhFhXPtaeirRnoroKcqjsYPA5MVxGdOfibcmUJoMOCx0VoLNq6igCih7bN9Qv+h2eXiQ60dAPGkjFA6VMQMTGpBGEPAZXPUZGSqGuQkSVi2tLkEkx1p1HyaJIdTr6phWblqPK7P3qGKi7BJqUEV0lmDoF7SuCBqvQ/md4z1O0twjWlGLTEgLYoQ7oTPxV/4Y/xOF9aPg5LAqBJCxIGo52JGBTQlAnAN/K0U/jiK4B6X8ODdfgysdUYwgu5kOaEvSNAp4UA+NSQFUKLengSSUh5pINIYQ0CunJgEfKUW0x3pGJtyfDUyIC3PtWj7/od/iDwwP4ywzQlW2qZSGicLiDj8wrgY8zFm0jrnoK9FdBY03wtBKcEAOqPLSOjTcnIMosXF2AzamgxX6LsgKU5qCNfKwmBKsKxcvvk3V+RCuPkMZR8gRcnoB1ZlnmNBQCHlnIz0fl8Ds8RVfJbBvYnoTIolBFNNqTArxVoBtzyPoCoBGisgJMlgJ35iMDFZA6C6oOhqpZZm0t/EoBT0mR+S5QmgfUx1oqoizl4caeakN9Gvrs7kEDg2yMJBvCMUUy2P3UREe/MkFR2D+L8RueTjl6ThDDuln3ApbHY8pYVBGJdz7CB4qwzmx4sg3d+QItzVk0IqCvAex+iclTcWU82pYIytPNAw3gYAMwr4a0AoOmZkdWAYhTwFHpfq/QUsfDJImgOA1oSAIbktC6CLTjiXmsBd5ZpWf6N3jaTincuDxiVmehygSsLQFXxhCqGIKub1UsIufqdU3A+if9lzXD+ynjiBIZrEBGirGBYlJbQLSn4p3p+FgT1F8PNibhbdl4Xyk6VIUMCjBNOTLSaOqtN0317k0MGaoTEQGTftYw03VA4b/i6VhQy55lTAgpkjAFn1DGUQoOpWShA5l4V9yBnI22xoDKXKO6HFSV4NrnuCYP0z1D2tKIHrq0MiltBjFWC3QVmgq9yNZYeLSKGsgnBkvwsRr0TTv8rs+y8hp6pwM7noPibJO2xvRaCVl26AT4F57eItamTJ2ZkCIOVfBIRdxBayQpD8EG08nOeEoeTsgiDpWPscFSeKAEV/ApGZeQJ6I1/mS9PyFmk/JYsj8FHSlBxU8QWTI+8oIQRWETDTjt/JMSuL8KWZ+FVpcNszrT6z7DrAZaWwZMW/R+8g2PQ3rzeJNFygfkCZaBMqgrm1JEE4pIrC8d64yHe58gb1vBKRnenUUqeURzKN4UjDUwLKV3kfK7WLUXWe1JNfqi7QlwewYljsSqPNCyGwhdk2878XEJ0V2GDTVCkwrLTId+QqnXCKCmTNN8D0liR3h64dHt92ZVJizjQ8okaExg7MpBpbTfMVERC6I9oDMdUuYibel4exopiSDq/VCBD1zlt5vrrM91Mj11ALKtwfQTUNYPxqS/65O+M6b8Ha32JgaeYeNCeEqG9ZXj3YV473N4WgHMDYCfpiBVkbktA9lbsqIzniQReFkLyuNhOQ+mfUYRAzf5W6ruAOV3AIGvRRprnJSCHWVgUzzYno2KwtCmILguCKwJ2Uy/thZnsxpxfC30P9ZC/7LG/s+N8FObj+xMBS6YJJLszSS0xdhwDaYpo70B7yoCh2vAMbFFVQjXhqEN96BFtRXtw6hl3TRUBkpiQXks3M6DxQy4xQ9pCURlTETGAuloJkTw5zfg7ADQW4FLwulFgeSxRmHselHwIsdxOeDYAuP4Esd6LcV5s8THUOGL1PqTymhKFYernxxNmDwJb8/E1E8xVQ7Smoa08KCaEPzlTWj8hRVFYsCS2tTKA0UcUBIGSdmImAlKGKicg6i4iCgUrrqLNEWBs93I7ge4v5yUhGDVnpbSm/sVfl8F8R+zHn5OurKe47Zd9tBYzwZonxYzqZZASuRHCn1QcRTSwMYqvVHBQ7yJg4v4uCwZkacg0iT0hQ/Yl25FdzLG7hyLKAKS0GPiIW3xaGs0KAtFWsMxaRgsjgBf3APKvYC2NOR1K0Y7aLU7UnEDqnCH6wNAKc/SEqmv8rY0BsHSaFQZQ0keko2epMANK7OFCq0thXRmOBmybM159miFF1obTEh5eFsa3pEFCEIgdYIVsreol/EtsmjaW+jOAqEdVxIDSjmwnINKWHALG64NMj2/ZXzhi3ak4m1cUs7FFFy8PYHsSSM1yWQnD5YGE3RlKqLwpodIuZOlwNaQ+cPO42Obcd9v8E+tJ/y4HndmJ8XamOdkeXYdrgsgWuOxtnRLMxdtT7LSzyqMslhQxkFaIzFJGCYKg5s5gCQakscgYhbUGIw0hJrKvfaKbpoFDEzGJWV8vCMJ7UpDuzKIzlSqI4aSBpDNPkSdp6XQcevx6U/Rf1vh/HWB/d0i88R71skF5snl0B824s5vJdvuZ10yl7mjAn9czEVakxF1vtVmX5FFEg6LwzBJNC5kYo0MqDkclEZB8khUxITqAuFapkUQsld8a6/A3VzuDVa4Y/V+WDOTEEeSkhhK6Ie/cAYKrA15F9cTbeYjTs8wfxj1+W7U59iEz6kJ35PT9/86F3hsiXN6lXd2O/mCvuA6UHobbeEgygxwWGS1rky2tDChllBMFIk1hiKNDJjGSyIBCRtpZhwtcLWfSeCnf353J9NtM8N5P9/ZVHoTqvShs4moDUSqPPTZdl8Tj39+bD0Tenoq9Nwrpk2vx0mN+/eDnsd094+Nex+f8Ts9H3puOfLc54Qfv2Y5WIpd4aYwuD0Hfj9otdHKNzSFWITBoJAJNbHBJjbUHAaIOYA4jMajjYFA5X19hfv+i3tbOW7rT1w3spx2it2NlYFAXShcG2B+6bv62H459vRcvP1oyNkxjr2WdUnlcUbtfrLn9nda97+MeB2b8D/9hnF2gXX2A+/UxqMzYOlVSMhGu58BnyatNtoSDPUB5voHQEMg0BxGlx/cwgSbg8y02YkYcF0gWBuiLw/YK/XZK/Fee3JtPefWl2L3vTLfI3x9sOkf3h8TLs5F20yG2fb7nRlg/9jLpvGnOu5+r759rPfusUG/k6P+30/7fDf/4G8rrP/a5p8Eiy7TQzWpCw3LQ1YbfcW7NT7GOh9TIwMQRYOiSKA5CGgKMIsYgJiFNjLMdeH7lezNZ567lUFrOW4buXc2S/0NVUygno00BG/nuy3xzr+LtdEFn+0JPNcTYtvx8ILK87TyzgnVnRNd7qf67p7Q3T0x6XHine/xT8y/7iactRRdBUVRO/T++fGV1ZdxyZdKj91aX30T2yzh0tMOSyMAcaihOchCu5AwxNzINQpi9S8C914yd/Jub2Zd01c+BIQshF6m2oD1dIdF7rkZrl33g7NdDLs2f1vlPRvlnVPKW6dUN3/odj+uDTgzwXWbT/N7n+z5gXt5+4kDUHbHLOJvSjKAL/NW4PbycnXAZl2wUZliUWeCygRYEbcvDt9vDjFLwo8SQhSvrwq3CFh6AWu35P5WztX9ch9LfRBUH2is8P7w+Mo7ru1ohHWHz9lW79OtHqdlt8+23z/Xy3AcjnSbTvZ6V8RcLGWvlEevVsWv5/tvpV0xlvvtSzK2WvMw07YVjkIf+yvX6iN25Cl78hSTMtUgjt1rYpuk0abWWKCRDQijTQ0xBgFzR8DaKwvYenp9r8zbKAgwCx5sP3NfTHKcjnPofXimzf203ONMd6Bdf8TlgahrI/HXXiW6zmR6LRaHLuUHfCxmfK1J+FLA2H7qtVPJ2ZYVbPfWUgRqRVG4af3NipDzRRi7LYzdFUbpW6L1LeFmGXe/JdIsiQHqQw117H1ByE4Vc6fs4Wap9275g/0XPnsV3qt5t2fjHYeZl3rvW3f5WveFXBriualCLqsDbQaifxqJdXr9yGU+xe192o2Pud5rJUEbBX5fi/x2hKm7mkbLyhjd4NE73gGCmL6MNnyoZ29UB2++9N2uDdA3s81SnkHCt7SlmurYphqGsYaxS+8xT29sFt/eLL23Veq1UXRnMd11gu80wP5JG3xRy7o4xL02knBdFXSli3GlP9J1OMplgnftbZLrXLLrcur1Txlua3k3VytC9bLc7QEpgRroPsOKPkPTEUD61dXuws817LVy37VK752mEKMk2iBLMIjj9wUsQ03IfoX3Zp7T+mPbz0kXPj52/JDivPjIYTbx6tSjm2MJd0djnYZjnIb5Lj1h9gq/i6rgqz1h1wbDnUciHSdiHN7GOS7wL39Isv+cfWutLmmzo8KysUgeUnSr8a3ZopfAvD7zSZa88uzu5/I7mw1+e02s/ZaoHUHQzsuHu5UhX0s8P6fZrUSfXWCfesc5P8e1n3/kOpd6ezbz3pvMB1Npdwa5N1SMC1JfW1mAg5Lp3Ml20oT9NBB2eSzMbibcZi7i/BLP5mO+72pz5taYGifQX879v+l0CRzeead+//LBYonzuuDedn3QXg1j66XPl+fea898P+Z7LqVdXuLbvefZziddmU+7uZDj8y7T803ajYl4l4GISx1B9s33zokeXJYxrirDXLoiXDXhzlq2wwjTdir0/Gz4+ffx9ktFAZ+VZcj+Fn3aPTpZ/PaUQ1/jkGFtqHbu+a2lUtd1gT+dCuulnut5Nz489VjKubPw+NIc7+Lb2HPvki6/S3Z7zXMa41wcZp/XMqx7g+zaAxwaPH8U3rcTB/8kYzl1sJ01rKsDIXa6gDPjQaeOJuCxy0JpxN78KN1VH9F+0a94WkeHa/PXxfbMqexLM5l272lD/Yf/Su7NxZzb81k3ZpMcpqPtp2MuzDxynORfecWxG4m8pIt06I9w7Odc62C41HpY13pcaPJ3lIW6KBiO6qBLXT7nNfe+H3nww2uWzdsMz7VeIQIY/jnuf+p3eFp0NkL76zN10br478eyHRcEnIWy0IXsu++ybk1n3JhKdZtOvzGVdn0s0fFVwpVX8T+NJrkOP7rZz3NVBNk3eVjXe9o1eF+UBjnJgy7LPc8q3U90eXyn9T4+HOmwIn8G6DepA3rov+rf8bToQjBvfxgvZYzk3VpW5C6Lc+dKAqefXB9PcR1JvKaLdx3iu+riXYYTnXTxV3RxDrpElz7uNbn/BamXbf1tm9pb54Qe1q2+F9p8aSs81el3Wsu9+alHCBm2CYo6+CXj/kd/gKfPPtQBadz8MCXKXNFUfNDUzVTFTiS7vOJfGYp00EY4aCLse8IdeiOuaCIuaSNsdXzn3mgnRYCtxMtG7Gkr87Vr9bVR+J9vD7qgZF7uywr9Oj2Iw+BRutHF9idfN36rA4qCzdtzw+L53po3rYXjZRxdjpc27qqGZdsZbNMRdLE90FYVfLGXfXEg1rmb81NbsF17oL0ywKGNSf8cJUFX2mLvTYtfGL6uUuQff1ei9X/iaR1VIwavzY3q6p6MlLFHnocN5vhpU901fLcejoua5agKvdzDcezjOnVHOnYwHZShTiqeT/9T7lh96afxAcigx3GMnsjf5trv9PPP/w15OaRbnBNWDgAAAABJRU5ErkJggg=="/>
</svg>

参考サイト
stackoverflow.com