Need plugin building help

[mbeatring44]

Hi,

I’m trying to build a plugin that uses the Boxicons library. I’m not an expert, so I really have no idea what I’m doing. Any help is appreciated.

Here’s what I have so far. Taken most from the nice Feather Icons plugin - trying to use that as a reference.

---

Initialize:

function(instance, context) {
    
    // Generate random string for div element ID
    
    var divId = "id_" + (Math.random() * Math.pow(2,54)).toString(18);
    
    // Create our div (a.k.a. wrapper) for the icon (which will be created in the 'update' function below)
    
    var div = document.createElement("div");
    div['id'] = divId;
    div['style'] = 'width:100%;height:100%;';
    
    // Add the new div to the Bubble instance
    // Store the div ID to the Bubble instance so that we can locate it in the 'update' function
    
    instance.canvas.append(div);
	instance.data.divId = divId;
}

Update:

function(instance, properties, context) {
	
    // Define properties
    
    var width = properties.bubble.width;
    var height = properties.bubble.height;
    
    var type = properties.type;
    var name = properties.name;
    var color = properties.color;
    var size = properties.size;
    var rotate = properties.rotate;
    var flip = properties.flip;
    var border = properties.border;
    var animation = properties.animation;
    var pull = properties.pull;
    
       
    // Find our original div
    
    var divId = instance.data.divId;
    var div = instance.canvas.find('#' + divId)[0];
    
    
    attributes = {}
    attributes['height'] = height;
    attributes['width'] = width;
    attributes['color'] = color;
    attributes['size'] = size;
    attributes['rotate'] = rotate;
    attributes['flip'] = flip;
    attributes['animation'] = animation;
    attributes['pull'] = pull;
    attributes['type'] = type;
    attributes['border'] = border;
        
       
    var iconName = [name];
    div.innerHTML = iconName;    
   }

Preview:

function(instance, properties) {

// Define properties

var width = properties.bubble.width;
var height = properties.bubble.height;

var type = properties.type;
var name = properties.name;
var color = properties.color;
var size = properties.size;
var rotate = properties.rotate;
var flip = properties.flip;
var border = properties.border;
var animation = properties.animation;
var pull = properties.pull;


var div = document.createElement("div");
div['style'] = 'width:100%;height:100%;';
//document.appendChild(div);
instance.canvas.append(div);


attributes = {}
attributes['height'] = height;
attributes['width'] = width;
attributes['color'] = color;
attributes['size'] = size;
attributes['rotate'] = rotate;
attributes['flip'] = flip;
attributes['animation'] = animation;
attributes['pull'] = pull;
attributes['type'] = type;
attributes['border'] = border;


var previewImg = document.createElement("img");

previewImg['src'] = '//dd7tel2830j4w.cloudfront.net/f1606865125426x258090400456897570/2020-12-01%2015_24_19-.svg';
previewImg['style'] = 'width:100%;height:100%;opacity:0.4;';

div.appendChild(previewImg);    
}

Initialize State:

function(properties, context) {
    
    var name = properties.name;
	
	return name;
}

It sees the name, but no icon… and no errors in the debug

[mbeatring44]

Anyone?

[jared.gibb]

i see you taking in the border value. have you found a way to preset the border on a component when making a plugin?