Giter Club home page Giter Club logo

Comments (3)

Cody0913 avatar Cody0913 commented on May 26, 2024 1

I'll also leave a sidenote as not sure if intended or not.
Once I did get the icons to render and not throw 404 errors (I ended up using webpack file-loader to load in the svgs from the vanilla src) I had to modify the theme object a bit to import the icons for reference as following the documentation from the example I referenced above had some issues with the different states (normal/active/hover).
I ended up removing the submenu.normalIcon.path/menu.normalIcon.path options and am now just setting the names.

I am personally using BluePrint for my React components and so modified the themeObject to use their colors, but here is the themeObject I used.

/*/ <reference path="./theme.d.ts" />*/
import { Colors } from '@blueprintjs/core';
import 'tui-image-editor/dist/svg/icon-a.svg';
import 'tui-image-editor/dist/svg/icon-b.svg';
import 'tui-image-editor/dist/svg/icon-c.svg';
import 'tui-image-editor/dist/svg/icon-d.svg';

// default keys and styles
export const theme = {
  'common.backgroundColor': Colors.DARK_GRAY1,
  'common.backgroundImage': 'none',
  'common.bi.image': '/pathTo/MyLogo.svg',
  'common.bisize.height': '42px',
  'common.bisize.width': '200px',
  'common.border': '0px',

// header
  'header.backgroundColor': 'transparent',
  'header.backgroundImage': 'none',
  'header.border': '0px',

// load button
  'loadButton.backgroundColor': Colors.WHITE,
  'loadButton.border': `1px solid ${Colors.LIGHT_GRAY2}`,
  'loadButton.color': '#222',
  'loadButton.fontFamily': 'NotoSans, sans-serif',
  'loadButton.fontSize': '12px',

// download button
  'downloadButton.backgroundColor': Colors.BLUE3,
  'downloadButton.border': `1px solid ${Colors.BLUE3}`,
  'downloadButton.color': Colors.WHITE,
  'downloadButton.fontFamily': 'NotoSans, sans-serif',
  'downloadButton.fontSize': '12px',

// main icons
  'menu.iconSize.height': '24px',
  'menu.iconSize.width': '24px',
  'menu.normalIcon.name': 'icon-d',

// submenu primary color
  'submenu.backgroundColor': Colors.DARK_GRAY1,
  'submenu.partition.color': Colors.GRAY3,

// submenu icons
  'submenu.activeIcon.name': 'icon-c',
  'submenu.iconSize.height': '32px',
  'submenu.iconSize.width': '32px',
  'submenu.normalIcon.name': 'icon-d',

// submenu labels
  'submenu.activeLabel.color': Colors.WHITE,
  'submenu.activeLabel.fontWeight': 'lighter',
  'submenu.normalLabel.color': Colors.GRAY4,
  'submenu.normalLabel.fontWeight': 'lighter',

// checkbox style
  'checkbox.backgroundColor': Colors.WHITE,
  'checkbox.border': `1px solid ${Colors.LIGHT_GRAY2}`,

// rango style
  'range.bar.color': Colors.DARK_GRAY5,
  'range.pointer.color': Colors.WHITE,
  'range.subbar.color': Colors.GRAY5,
  'range.title.color': Colors.WHITE,
  'range.title.fontWeight': 'lighter',
  'range.value.backgroundColor': Colors.DARK_GRAY1,
  'range.value.border': `1px solid ${Colors.DARK_GRAY2}`,
  'range.value.color': Colors.WHITE,
  'range.value.fontSize': '11px',
  'range.value.fontWeight': 'lighter',

// colorpicker style
  'colorpicker.button.border': `1px solid ${Colors.DARK_GRAY1}`,
  'colorpicker.title.color': Colors.WHITE,
};

from toast-ui.react-image-editor.

Cody0913 avatar Cody0913 commented on May 26, 2024

Not sure if related, but I think this might be the cause.
Cannot GET /icon-b.svg
It looks like it is trying to request the SVG's from wherever you are using the wrapper.
I think a quick workaround would be to copy the svg files from vanilla lib and move them into your public/web folder to be accessible.
Not seeing a way to replace icons to be able to work around this issue. Will dig deeper and relay back here if I find anything.

from toast-ui.react-image-editor.

Cody0913 avatar Cody0913 commented on May 26, 2024

I think I found out how to replace the icons. You need to supply the icon location in your theme object.
http://nhn.github.io/tui.image-editor/latest/themeConfig

from toast-ui.react-image-editor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.