8
0

icon.js 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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. import 'ckeditor5-theme-lark/theme/theme.scss';
  8. const wrapper = document.querySelector( '#inline-svg' );
  9. const icon = `
  10. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  11. <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
  12. xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  13. <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
  14. <title>image</title>
  15. <desc>Created with Sketch.</desc>
  16. <defs></defs>
  17. <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
  18. <g id="image" sketch:type="MSArtboardGroup" fill="#454545">
  19. <g id="icon:image" sketch:type="MSLayerGroup" transform="translate(2.000000, 3.000000)">
  20. <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
  21. L16,2.00585866 C16,0.898053512 15.1054862,0 14.0059397,0 L1.99406028,0 C0.892771196,0 0,0.897060126 0,2.00585866
  22. 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
  23. 15,2.00247329 L15,11.9975267 C15,12.5511774 14.5500512,13 13.9931545,13 L2.00684547,13 C1.45078007,13 1,12.544239
  24. 1,11.9975267 L1,2.00247329 Z M2.0237314,12.0028573 L14,12.0028573 L14,8.90598928 L11.1099289,4.64285714
  25. L8.01350775,9.9000001 L5.01091767,7.79714291 L2,10.9601769 L2.0237314,12.0028573 Z M4.40625001,3 C3.62959688,3
  26. 3,3.62360071 3,4.39285714 C3,5.16210429 3.62959688,5.78571429 4.40625001,5.78571429 C5.18289376,5.78571429
  27. 5.81250002,5.16210429 5.81250002,4.39285714 C5.81250002,3.62360071 5.18289376,3 4.40625001,3 L4.40625001,3 Z"
  28. id="path4700" sketch:type="MSShapeGroup"></path>
  29. </g>
  30. </g>
  31. </g>
  32. </svg>`;
  33. // Small.
  34. addCase( renderIcon( icon, 20 ) );
  35. // Medium.
  36. addCase( renderIcon( icon, 40 ) );
  37. // Large.
  38. addCase( renderIcon( icon, 60 ) );
  39. // Color.
  40. addCase( renderIcon( icon, 60, 'red' ) );
  41. // Inherited color.
  42. const iconWrapper = document.createElement( 'p' );
  43. iconWrapper.style.color = 'blue';
  44. iconWrapper.appendChild( document.createTextNode( 'foo' ) );
  45. iconWrapper.appendChild( renderIcon( icon, 60 ) );
  46. iconWrapper.appendChild( document.createTextNode( 'bar' ) );
  47. addCase( iconWrapper );
  48. function renderIcon( content, size, color ) {
  49. const iconView = new IconView();
  50. iconView.content = content;
  51. iconView.init();
  52. if ( size ) {
  53. iconView.element.style.width = `${ size }px`;
  54. iconView.element.style.height = `${ size }px`;
  55. }
  56. if ( color ) {
  57. iconView.element.style.color = color;
  58. }
  59. return iconView.element;
  60. }
  61. function addCase( el ) {
  62. const item = document.createElement( 'li' );
  63. item.appendChild( el );
  64. wrapper.appendChild( item );
  65. }