cordova-plugin-vector-smooth

The cordova-plugin-vector-smooth plugin is used to convert vector drawable files into base64 encoded images for use in Cordova applications.
It supports XML vector drawable files, as well as PNG and BMP file formats.
It also allows retrieving the application icon (app logo) without modifying its color or size.

Platform Support

• Android

Installation

You can install this plugin through Cordova CLI by running the following command:

cordova plugin add cordova-plugin-vector-smooth

Usage

Function: open

cordova.plugin.vector.smooth.open({
  name: 'ic_vector',
  color: '#FF0000'
}).then(function(result) {
  console.log(result.src);
});

Parameters

• name (string) → the name of the vector drawable file in the res/drawable folder.
• color (string) → the color tint that will be applied to the vector drawable.

Output

The output of this function is a base64 encoded image (PNG or BMP), depending on the type of icon.
You can use the result in an <img> tag or as a CSS background.

Example

document.addEventListener('deviceready', onDeviceReady, false);

async function onDeviceReady() {
  const imgContainer = document.createDocumentFragment();

  const crop = await cordova.plugin.vector.smooth.open({
    name: 'crop',
    color: '#FF00FF'
  });

  const img = document.createElement('img');
  img.src = crop.src;

  imgContainer.appendChild(img);
  document.body.appendChild(imgContainer);
}

Function: getAppLogo

This function retrieves the application logo (ic_launcher) as base64 without any modification (original color and size).

cordova.plugin.vector.smooth.getAppLogo()
  .then(function(result) {
    console.log(result.src);
    document.getElementById("logo").src = result.src;
  })
  .catch(function(err) {
    console.error(err);
  });

Parameters

• No parameters required.

Output

Returns a base64 encoded PNG of the current app logo.

Example

document.addEventListener('deviceready', async function() {
  const logo = await cordova.plugin.vector.smooth.getAppLogo();

  const img = document.createElement('img');
  img.src = logo.src;
  img.style.width = "100px"; // optional resize in HTML/CSS

  document.body.appendChild(img);
});