icon.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals document */
  6. import IconView from '../../../src/icon/iconview';
  7. const wrapper = document.querySelector( '#inline-svg' );
  8. const icon = `
  9. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  10. <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
  11. xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  12. <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
  13. <title>image</title>
  14. <desc>Created with Sketch.</desc>
  15. <defs></defs>
  16. <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
  17. <g id="image" sketch:type="MSArtboardGroup" fill="#454545">
  18. <g id="icon:image" sketch:type="MSLayerGroup" transform="translate(2.000000, 3.000000)">
  19. <path d="M0,11.9941413 C0,13.1019465 0.894513756,14 1.99406028,14 L14.0059397,14 C15.1072288,14 16,13.1029399 16,11.9941413
  20. L16,2.00585866 C16,0.898053512 15.1054862,0 14.0059397,0 L1.99406028,0 C0.892771196,0 0,0.897060126 0,2.00585866
  21. L0,11.9941413 Z M1,2.00247329 C1,1.44882258 1.44994876,1 2.00684547,1 L13.9931545,1 C14.5492199,1 15,1.45576096
  22. 15,2.00247329 L15,11.9975267 C15,12.5511774 14.5500512,13 13.9931545,13 L2.00684547,13 C1.45078007,13 1,12.544239
  23. 1,11.9975267 L1,2.00247329 Z M2.0237314,12.0028573 L14,12.0028573 L14,8.90598928 L11.1099289,4.64285714
  24. L8.01350775,9.9000001 L5.01091767,7.79714291 L2,10.9601769 L2.0237314,12.0028573 Z M4.40625001,3 C3.62959688,3
  25. 3,3.62360071 3,4.39285714 C3,5.16210429 3.62959688,5.78571429 4.40625001,5.78571429 C5.18289376,5.78571429
  26. 5.81250002,5.16210429 5.81250002,4.39285714 C5.81250002,3.62360071 5.18289376,3 4.40625001,3 L4.40625001,3 Z"
  27. id="path4700" sketch:type="MSShapeGroup"></path>
  28. </g>
  29. </g>
  30. </g>
  31. </svg>`;
  32. // Small.
  33. addCase( renderIcon( icon, 20 ) );
  34. // Medium.
  35. addCase( renderIcon( icon, 40 ) );
  36. // Large.
  37. addCase( renderIcon( icon, 60 ) );
  38. // Color.
  39. addCase( renderIcon( icon, 60, 'red' ) );
  40. // Inherited color.
  41. const iconWrapper = document.createElement( 'p' );
  42. iconWrapper.style.color = 'blue';
  43. iconWrapper.appendChild( document.createTextNode( 'foo' ) );
  44. iconWrapper.appendChild( renderIcon( icon, 60 ) );
  45. iconWrapper.appendChild( document.createTextNode( 'bar' ) );
  46. addCase( iconWrapper );
  47. function renderIcon( content, size, color ) {
  48. const iconView = new IconView();
  49. iconView.render();
  50. iconView.content = content;
  51. if ( size ) {
  52. iconView.element.style.width = `${ size }px`;
  53. iconView.element.style.height = `${ size }px`;
  54. }
  55. if ( color ) {
  56. iconView.element.style.color = color;
  57. }
  58. return iconView.element;
  59. }
  60. function addCase( el ) {
  61. const item = document.createElement( 'li' );
  62. item.appendChild( el );
  63. wrapper.appendChild( item );
  64. }