diff --git a/package.json b/package.json index c33cd3b..687d1c1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/warning", - "version": "1.2.0", + "version": "1.3.0", "keywords": [ "codex editor", "tool", @@ -30,5 +30,8 @@ "svg-inline-loader": "^0.8.0", "webpack": "^4.29.6", "webpack-cli": "^3.3.0" + }, + "dependencies": { + "@codexteam/icons": "^0.0.4" } } diff --git a/src/index.css b/src/index.css index a9529cb..f41ef0f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,12 @@ .cdx-warning { position: relative; + +} + +@media all and (min-width: 736px) { + .cdx-warning { + padding-left: 36px; + } } .cdx-warning [contentEditable=true][data-placeholder]::before{ @@ -21,13 +28,13 @@ .cdx-warning::before { content: ''; - background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 320 294' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='%237B7E89' d='M160.5 97c12.426 0 22.5 10.074 22.5 22.5v28c0 12.426-10.074 22.5-22.5 22.5S138 159.926 138 147.5v-28c0-12.426 10.074-22.5 22.5-22.5zm0 83c14.636 0 26.5 11.864 26.5 26.5S175.136 233 160.5 233 134 221.136 134 206.5s11.864-26.5 26.5-26.5zm-.02-135c-6.102 0-14.05 8.427-23.842 25.28l-74.73 127.605c-12.713 21.444-17.806 35.025-15.28 40.742 2.527 5.717 8.519 9.175 17.974 10.373h197.255c5.932-1.214 10.051-4.671 12.357-10.373 2.307-5.702-1.812-16.903-12.357-33.603L184.555 70.281C174.608 53.427 166.583 45 160.48 45zm154.61 165.418c2.216 6.027 3.735 11.967 4.393 18.103.963 8.977.067 18.035-3.552 26.98-7.933 19.612-24.283 33.336-45.054 37.586l-4.464.913H61.763l-2.817-.357c-10.267-1.3-19.764-4.163-28.422-9.16-11.051-6.377-19.82-15.823-25.055-27.664-4.432-10.03-5.235-19.952-3.914-29.887.821-6.175 2.486-12.239 4.864-18.58 3.616-9.64 9.159-20.55 16.718-33.309L97.77 47.603c6.469-11.125 12.743-20.061 19.436-27.158 4.62-4.899 9.562-9.07 15.206-12.456C140.712 3.01 150.091 0 160.481 0c10.358 0 19.703 2.99 27.989 7.933 5.625 3.356 10.563 7.492 15.193 12.354 6.735 7.072 13.08 15.997 19.645 27.12l.142.24 76.986 134.194c6.553 10.46 11.425 19.799 14.654 28.577z'/%3E%3C/svg%3E"); - width: 18px; - height: 18px; - background-size: 18px 18px; + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='5' width='14' height='14' rx='4' stroke='black' stroke-width='2'/%3E%3Cline x1='12' y1='9' x2='12' y2='12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 15.02V15.01' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); + width: 24px; + height: 24px; + background-size: 24px 24px; position: absolute; - margin-top: 12px; - left: -30px; + margin-top: 8px; + left: 0; } @media all and (max-width: 735px) { diff --git a/src/index.js b/src/index.js index 89d877e..4a14b99 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ /** * Import Tool's icon */ -import ToolboxIcon from './svg/toolbox.svg'; +import { IconWarning } from '@codexteam/icons'; /** * Build styles @@ -41,7 +41,7 @@ export default class Warning { */ static get toolbox() { return { - icon: ToolboxIcon, + icon: IconWarning, title: 'Warning', }; } diff --git a/src/svg/toolbox.svg b/src/svg/toolbox.svg deleted file mode 100644 index 63098db..0000000 --- a/src/svg/toolbox.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 19f6c8f..b5f8d90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -592,6 +592,11 @@ lodash "^4.17.11" to-fast-properties "^2.0.0" +"@codexteam/icons@^0.0.4": + version "0.0.4" + resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.4.tgz#8b72dcd3f3a1b0d880bdceb2abebd74b46d3ae13" + integrity sha512-V8N/TY2TGyas4wLrPIFq7bcow68b3gu8DfDt1+rrHPtXxcexadKauRJL6eQgfG7Z0LCrN4boLRawR4S9gjIh/Q== + "@webassemblyjs/ast@1.8.5": version "1.8.5" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"