icon.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. import IconView from '../../../src/icon/iconview';
  6. import testUtils from '../../_utils/utils';
  7. const icon = `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
  8. <path d="M2 14.994C2 16.102 2.895 17 3.994 17h12.012A2 2 0 0 0 18 14.994V5.006A2.001 2.001 0 0 0
  9. 16.006 3H3.994A2 2 0 0 0 2 5.006v9.988zm1-9.992C3 4.45 3.45 4 4.007 4h11.986A1.01 1.01 0 0 1 17
  10. 5.002v9.996C17 15.55 16.55 16 15.993 16H4.007A1.01 1.01 0 0 1 3 14.998V5.002zm1.024
  11. 10H16v-3.096l-2.89-4.263-3.096 5.257-3.003-2.103L4 13.96l.024 1.043zM6.406 6A1.4 1.4 0 0 0 5
  12. 7.393a1.4 1.4 0 0 0 1.406 1.393 1.4 1.4 0 0 0 1.407-1.393A1.4 1.4 0 0 0 6.406 6z"
  13. fill-rule="evenodd"/>
  14. </svg>`;
  15. const iconDirty = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  16. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  17. <svg xmlns="http://www.w3.org/2000/svg">
  18. <title>Title</title>
  19. <desc>Desc</desc>
  20. <path d="M2 14.994C2 16.102 2.895 17 3.994 17h12.012A2 2 0 0 0 18 14.994V5.006A2.001 2.001 0 0 0
  21. 16.006 3H3.994A2 2 0 0 0 2 5.006v9.988zm1-9.992C3 4.45 3.45 4 4.007 4h11.986A1.01 1.01 0 0 1 17
  22. 5.002v9.996C17 15.55 16.55 16 15.993 16H4.007A1.01 1.01 0 0 1 3 14.998V5.002zm1.024
  23. 10H16v-3.096l-2.89-4.263-3.096 5.257-3.003-2.103L4 13.96l.024 1.043zM6.406 6A1.4 1.4 0 0 0 5
  24. 7.393a1.4 1.4 0 0 0 1.406 1.393 1.4 1.4 0 0 0 1.407-1.393A1.4 1.4 0 0 0 6.406 6z"
  25. fill-rule="evenodd"/>
  26. </svg>`;
  27. const iconViewBox = `<svg viewBox="0 0 35 35" xmlns="http://www.w3.org/2000/svg">
  28. <path d="M3.5 26.24c0 1.939 1.566 3.51 3.49 3.51h21.02a3.5 3.5 0 0 0 3.49-3.51V8.76a3.502 3.502 0 0
  29. 0-3.49-3.51H6.99A3.5 3.5 0 0 0 3.5 8.76v17.48zM5.25 8.753C5.25 7.787 6.038 7 7.012 7h20.976a1.767 1.767 0 0
  30. 1 1.762 1.753v17.494c0 .965-.788 1.753-1.762 1.753H7.012a1.767 1.767 0 0 1-1.762-1.753V8.753zm1.792
  31. 17.5H28v-5.419l-5.058-7.46-5.418 9.2-5.255-3.68L7 24.43l.042 1.825v-.002zM11.21 10.5a2.45 2.45 0 0 0-2.46
  32. 2.438 2.45 2.45 0 0 0 2.46 2.438 2.45 2.45 0 0 0 2.463-2.438A2.45 2.45 0 0 0 11.21 10.5z"
  33. fill-rule="evenodd"/></svg>`;
  34. const ui = testUtils.createTestUIView( {
  35. 'icon20': '#icon20',
  36. 'icon40': '#icon40',
  37. 'icon60': '#icon60',
  38. 'iconRed': '#icon-red',
  39. 'iconBlueInherited': '#icon-blue-inherited',
  40. 'iconDirty': '#icon-dirty',
  41. 'iconViewBox': '#icon-view-box'
  42. } );
  43. ui.icon20.add( getIcon( icon, 20 ) );
  44. ui.icon40.add( getIcon( icon, 40 ) );
  45. ui.icon60.add( getIcon( icon, 60 ) );
  46. ui.iconRed.add( getIcon( icon, 20, 'red' ) );
  47. ui.iconBlueInherited.add( getIcon( icon, 20 ) );
  48. ui.iconDirty.add( getIcon( iconDirty, 100, 'green' ) );
  49. ui.iconViewBox.add( getIcon( iconViewBox, 100, 'green' ) );
  50. function getIcon( content, size, color ) {
  51. const iconView = new IconView();
  52. iconView.render();
  53. iconView.content = content;
  54. if ( size ) {
  55. iconView.element.style.width = `${ size }px`;
  56. iconView.element.style.height = `${ size }px`;
  57. }
  58. if ( color ) {
  59. iconView.element.style.color = color;
  60. }
  61. return iconView;
  62. }