Comments (3)
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.
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.
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)
- SVG icons are not displayed on the editor HOT 6
- Load secondary Image over canvas HOT 1
- submenus stay in old status when i reload a new image HOT 5
- how to set default crop option? HOT 1
- How to get edited image content/ Data url? HOT 4
- ReferenceError: window is not defined HOT 8
- throw TypeError Error when clicking delete btn(when nothing is selected)
- How to zoom in or zoom out image when editing. HOT 5
- How to get all filters and modifications applied to an image HOT 5
- How can we resize <ImageEditor> if the window changes of size ? HOT 1
- CSP Issues? HOT 3
- feature request! - Can we add a font picker? HOT 1
- addShape method not available (old version of tui-image-editor) HOT 1
- Getting Started Link is Dead HOT 1
- Can only addImageObject after an image has been manually loaded. HOT 4
- Color picker palette does not appear HOT 5
- Change image while keeping the filters/texts/objects/etc HOT 4
- Range/Slider not working HOT 1
- incompatible with react 17 HOT 3
- Error when building on server - Uncaught TypeError: Super expression must either be null or a function HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from toast-ui.react-image-editor.