Issue #1379Opened August 23, 2018by Abhisheknanda13444631 reactions
outdated

Question : how to replace style-manager font-awesome icon into svg?

Question

hi @artf i Want to replace an icon of style manager with svg icon . As you can see screenshot attached. I tried dat way. screenshot from 2018-08-24 00-20-29

Answers (3)

artf• September 5, 20181 reactions

Yeah put those changes inside your plugin

grapesjs.init({
	...
	plugins: [
		// start your plugin
		editor => {
			...
			pnm.getButton('views', 'open-sm').set({
				label: '<svg>...</svg>'
			});
		}
	]
})
artf• August 24, 20180 reactions

???... your code is all broken (check the syntax) Probably you want something like this

pnm.getButton('views', 'open-sm').set({
	label: '<svg>...</svg>'
});
Abhisheknanda1344463• August 27, 20180 reactions

Please re-open this issue.

hi @artf I also tried this way

Code SnippetTEXT
**pnm.getButton('views', 'open-sm').set({
  label: `<svg>
     width="1024" height="1024" viewBox="0 0 1024 1024" style="margin-left: calc(50% - 0.5em)"><g transform="scale(0.03125 0.03125)"><path d="M881.76 269.44c-43.36 52.704-162.24 198.24-256.672 313.92l-119.904-121.728c108.448-96.512 242.688-215.808 291.2-258.528 86.304-76.064 161.984-121.312 178.432-102.816 10.304 10.24-17.056 76.672-93.056 169.152zM604.128 608.96c-36.576 44.768-68.064 83.328-87.328 106.976l-141.952-138.336c23.008-20.48 61.312-54.56 105.728-94.048l123.552 125.408zM495.648 741.856v-0.384c-82.4 316.16-448.576 134.4-448.576 134.4s153.632 19.36 153.632-123.936c0-138.912 141.184-151.456 149.856-152.096l145.376 141.664c0 0.032-0.288 0.352-0.288 0.352z"></path></g>
  **</svg>'`**
    id: "open-sm",
    className: 'gjs-pn-btn',
    command: "open-sm",
    active: !0,
    attributes: {
        title: "Open Style Manager"
}
});**

![screen shot 2018-08-27 at 11 01 59 am](https://user-images.githubusercontent.com/20657737/44642168-ab861c80-a9e8-11e8-9c79-6fbbd81bafd2.png)


 It'll not reflected any changes .can you please tell how can i override that Style Manager. Thanks

 Is it necessary to write command for this button.?

Related Questions and Answers

Continue research with similar issue discussions.

Issue #1490

How to send value from the layout section

@artf I need your help to solve my issue with grapesjs i have this code in the template: I want to pass that value in this way but when I e...

2 answersUpdated October 11, 2019

Issue #1294

How to add category for default block manager?

@artf I want put all default blocks to category named "Basic". But I can't find any documents about it. I use editor.BlockManager.getAll()....

3 answersUpdated September 17, 2019

Issue #1780

How to change extra dropdown for link change trait

Hello @artf , I want to give one more functionality to user like user can change any link with default links drop down. In above image i wa...

3 answersUpdated February 21, 2020

Issue #1597

Can we add resizable property in gjs-layer-manager frame?

hi @artf Is it possible to add resizable property on the frame of layer-manager as screen shot below i want to add dynamic resizable proper...

3 answersUpdated November 26, 2019

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders