detecting / using custom fullscreen icon paths

[benjibee]

While this may not be the best method of doing this, it works for me, and may be needed by others!

[desandro]

Hello! Thank you for this contribution. Yeah, I wondered if anyone would like a custom fullscreen button shapes, similar to the arrowShape option.

I would implement this feature by add two new options: viewFullscreenButtonShape and exitFullscreenButtonShape.

You can copy/paste this code before you initialize Flickity to use these options

Flickity.defaults.viewFullscreenButtonShape =
  'M15,20,7,28h5v4H0V20H4v5l8-8Zm5-5,8-8v5h4V0H20V4h5l-8,8Z';
Flickity.defaults.exitFullscreenButtonShape =
  'M32,3l-7,7h5v4H18V2h4V7l7-7ZM3,32l7-7v5h4V18H2v4H7L0,29Z';

var svgURI = 'http://www.w3.org/2000/svg';

Flickity.FullscreenButton.prototype.createIcon = function() {
  var svg = document.createElementNS( svgURI, 'svg');
  svg.setAttribute( 'class', 'flickity-button-icon' );
  svg.setAttribute( 'viewBox', '0 0 32 32' );
  // path & direction
  var path = document.createElementNS( svgURI, 'path');
  direction = this.options[ this.name + 'FullscreenButtonShape' ];
  path.setAttribute( 'd', direction );
  // put it together
  svg.appendChild( path );
  this.element.appendChild( svg );
};

// init Flickity
new Flickity( '.carousel', {
  // custom fullscreen button shapes
  viewFullscreenButtonShape: '...',
  exitFullscreenButtonShape: '...',
});

I've opened #17 to track interest