chore: document for svg icon setting (nhn#348)

* feat: default menu svg icon - middle commit * feat: default icon normal Check basic operation * feat: prototype complete for default icon improve * feat: complate default icon code * example file update for default icon setting * chore: svg-loader dependency -> devdependency * chore: document for svg icon setting * fixed some link at document * apply codereview * apply codereview - 2
EveryMundo · Jul 2, 2020 · f54e4e8 · f54e4e8
1 parent bba562e
commit f54e4e8
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -29,6 +29,8 @@
 * [Usage](#-usage)
  * [HTML](#html)
  * [JavaScript](#javascript)
+ * [Menu svg icon setting](#menu-svg-icon-setting)
+ * [TypeScript](#-typescript)
 * [Development](#-development)
  * [Setup](#setup)
  * [Run webpack-dev-server](#run-webpack-dev-server)
@@ -293,6 +295,15 @@ var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
 });
 ```
 
+### Menu svg icon setting
+
+#### There are two ways to set icons.
+
+1. **Use default svg built** into imageEditor without setting svg file path (Features added since version v3.9.0).
+2. There is a way to use the **actual physical svg file** and **set the file location manually**.
+
+Can find more details in [this document](https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md#4-menu-submenu-svg-icon-setting).
+
 ### TypeScript
 If you using TypeScript, You must `import module = require('module')` on importing.
 [`export =` and `import = require()`](https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require)

diff --git a/docs/Basic-Tutorial.md b/docs/Basic-Tutorial.md
@@ -39,7 +39,87 @@ imageEditor.loadImageFromURL('img/sampleImage.jpg', 'My sample image')
 
 <br>
 
-### 4. Localization
+### 4. Menu, Submenu SVG icon setting
+
+In the image below, the red and blue areas are set using the SVG icon.
+
+![svgIcon](https://user-images.githubusercontent.com/35218826/75416627-1ca5e780-5972-11ea-9a55-b179686536de.png)
+
+#### Two ways to set the icon
+
+1. **Use default SVG built** into imageEditor without setting SVG file path (Features added since version v3.9.0).
+ * This is the default setting for Image Editor.
+ * It's easy to change the color to match the icon state as shown below, but it uses the built-in default shape so you can't change the icon's appearance.
+ ```js
+ const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
+ includeUI: {
+ ...
+ theme: {
+ 'menu.normalIcon.color': '#8a8a8a',
+ 'menu.activeIcon.color': '#555555',
+ 'menu.disabledIcon.color': '#434343',
+ 'menu.hoverIcon.color': '#e9e9e9',
+ 'submenu.normalIcon.color': '#8a8a8a',
+ 'submenu.activeIcon.color': '#e9e9e9',
+ }
+ ...
+ });
+ ```
+
+2. There is a way to use the **your SVG file** and **set the file location manually**.
+ * This is used when you want to completely reconfigure the SVG icon itself rather than the built-in icon.
+ * The disadvantage is that the color must be set by modifying the SVG file directly.
+ * Need to set the path and name for each icon state as shown below.
+ ```js
+ const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
+ includeUI: {
+ ...
+ theme: {
+ 'menu.normalIcon.path': '../dist/svg/icon-d.svg',
+ 'menu.normalIcon.name': 'icon-d',
+ 'menu.activeIcon.path': '../dist/svg/icon-b.svg',
+ 'menu.activeIcon.name': 'icon-b',
+ 'menu.disabledIcon.path': '../dist/svg/icon-a.svg',
+ 'menu.disabledIcon.name': 'icon-a',
+ 'menu.hoverIcon.path': '../dist/svg/icon-c.svg',
+ 'menu.hoverIcon.name': 'icon-c',
+ 'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
+ 'submenu.normalIcon.name': 'icon-a',
+ 'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
+ 'submenu.activeIcon.name': 'icon-c'
+ }
+ ...
+ });
+ ```
+ * How to get SVG file sample
+ * In the project folder where `tui-image-editor` is installed, the file is in the path described below
+ ```bash
+ // or use cdn (https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg)
+ $ cd node_modules/tui-image-editor/dist/svg
+ ```
+ * Or just get the file via cdn.
+ * https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg
+ * https://uicdn.toast.com/tui-image-editor/latest/svg/icon-b.svg
+ * https://uicdn.toast.com/tui-image-editor/latest/svg/icon-c.svg
+ * https://uicdn.toast.com/tui-image-editor/latest/svg/icon-d.svg
+ 
+
+ * Don't forget to use the icon name setting of the `includeUI.theme` option to match the $ {iconName} part of the file.
+ ```svg
+ icon-a.svg file
+ submenu.activeIcon.name <-> iconName
+ ...
+ <symbol id="${iconName}-ic-apply" viewBox="0 0 24 24">
+ <g fill="none" fill-rule="evenodd">
+ <path d="M0 0h24v24H0z"/>
+ <path stroke="#434343" d="M4 12.011l5 5L20.011 6"/>
+ </g>
+ </symbol>
+ ...
+ ```
+
+
+### 5. Localization
 ImageEditor provide feature to customize all of inscriptions. Look at example.
 
 ```js
@@ -49,7 +129,7 @@ var locale_ru_RU = { // override default English locale to your custom
  // etc...
 };
 // Image editor
-var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
+const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
  includeUI: {
  loadImage: {
  path: 'img/sampleImage.jpg',

diff --git a/src/js/ui.js b/src/js/ui.js
@@ -340,7 +340,6 @@ class Ui {
  const menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName);
 
  this._addTooltipAttribute(btnElement, menuName);
-
  btnElement.className = `tie-btn-${menuName} ${util.cls('item')} ${menuType}`;
  btnElement.innerHTML = menuItemHtml;
 

diff --git a/src/js/ui/theme/standard.js b/src/js/ui/theme/standard.js
@@ -96,30 +96,23 @@
  'downloadButton.fontFamily': 'NotoSans, sans-serif',
  'downloadButton.fontSize': '12px',
 
- // main icons
- 'menu.normalIcon.path': '../dist/svg/icon-d.svg',
- 'menu.normalIcon.name': 'icon-d',
- 'menu.activeIcon.path': '../dist/svg/icon-b.svg',
- 'menu.activeIcon.name': 'icon-b',
- 'menu.disabledIcon.path': '../dist/svg/icon-a.svg',
- 'menu.disabledIcon.name': 'icon-a',
- 'menu.hoverIcon.path': '../dist/svg/icon-c.svg',
- 'menu.hoverIcon.name': 'icon-c',
+ // icons default
+ 'menu.normalIcon.color': '#8a8a8a',
+ 'menu.activeIcon.color': '#555555',
+ 'menu.disabledIcon.color': '#434343',
+ 'menu.hoverIcon.color': '#e9e9e9',
+ 'submenu.normalIcon.color': '#8a8a8a',
+ 'submenu.activeIcon.color': '#e9e9e9',
+
  'menu.iconSize.width': '24px',
  'menu.iconSize.height': '24px',
+ 'submenu.iconSize.width': '32px',
+ 'submenu.iconSize.height': '32px',
 
  // submenu primary color
  'submenu.backgroundColor': '#1e1e1e',
  'submenu.partition.color': '#858585',
 
- // submenu icons
- 'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
- 'submenu.normalIcon.name': 'icon-a',
- 'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
- 'submenu.activeIcon.name': 'icon-c',
- 'submenu.iconSize.width': '32px',
- 'submenu.iconSize.height': '32px',
-
  // submenu labels
  'submenu.normalLabel.color': '#858585',
  'submenu.normalLabel.fontWeight': 'lighter',
@@ -181,16 +174,17 @@ export default {
 
  // main icons
  'menu.normalIcon.color': '#8a8a8a',
- // 'menu.normalIcon.path': '#8a8a8a',
  'menu.activeIcon.color': '#555555',
  'menu.disabledIcon.color': '#434343',
  'menu.hoverIcon.color': '#e9e9e9',
- 'menu.iconSize.width': '24px',
- 'menu.iconSize.height': '24px',
 
  // submenu icons
  'submenu.normalIcon.color': '#8a8a8a',
  'submenu.activeIcon.color': '#e9e9e9',
+
+ 'menu.iconSize.width': '24px',
+ 'menu.iconSize.height': '24px',
+
  'submenu.iconSize.width': '32px',
  'submenu.iconSize.height': '32px',