{"id":478898,"date":"2026-05-07T10:15:16","date_gmt":"2026-05-07T10:15:16","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=478898"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=478898","title":{"rendered":"svg-react-preview: \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 inline-SVG \u0432\u043d\u0443\u0442\u0440\u0438 JSX-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u044f\u043c\u043e \u0432 Zed"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h3>\u0411\u043e\u043b\u044c<\/h3>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0448\u044c \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u0438 \u043f\u0440\u0438\u0432\u0435\u0442:<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a99\/950\/549\/a99950549476b591c6027584b0c90274.png\" alt=\"\u0422\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 GobletIcon.tsx \u0441\u043e \u0441\u0442\u0435\u043d\u043e\u0439 path-\u043e\u0432\" title=\"\u0422\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 GobletIcon.tsx \u0441\u043e \u0441\u0442\u0435\u043d\u043e\u0439 path-\u043e\u0432\" width=\"3248\" height=\"2112\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a99\/950\/549\/a99950549476b591c6027584b0c90274.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a99\/950\/549\/a99950549476b591c6027584b0c90274.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0422\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 GobletIcon.tsx \u0441\u043e \u0441\u0442\u0435\u043d\u043e\u0439 path-\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<p>\u0423 Zed \u0435\u0441\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 preview \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 .svg-\u0444\u0430\u0439\u043b\u043e\u0432. \u041d\u043e \u0434\u043b\u044f SVG, \u043b\u0435\u0436\u0430\u0449\u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 JSX, \u2014 \u043d\u0438\u0447\u0435\u0433\u043e. \u0422\u0430\u043a \u0436\u0435, \u043a\u0441\u0442\u0430\u0442\u0438, \u0438 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 task, \u0430 \u043d\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f Zed. \u041d\u043e extension API \u0443 Zed \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u0430\u0451\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e: \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u0431\u0443\u0444\u0435\u0440 \u0432 \u043f\u0440\u0435\u0432\u044c\u044e-\u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f. \u041a\u043e\u0433\u0434\u0430 API \u0434\u043e\u0440\u0430\u0441\u0442\u0451\u0442 \u2014 \u0441 \u0440\u0430\u0434\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0443. \u0410 \u043f\u043e\u043a\u0430 \u2014 Zed-\u0442\u0430\u0441\u043a + \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f CLI.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/288\/383\/e89\/288383e8928c14b67b4387f6e07497cc.png\" alt=\"\u0418\u043b\u0438 cmd+opt+v: \u0438\u043a\u043e\u043d\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435\" title=\"\u0418\u043b\u0438 cmd+opt+v: \u0438\u043a\u043e\u043d\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435\" width=\"3248\" height=\"2112\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/288\/383\/e89\/288383e8928c14b67b4387f6e07497cc.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/288\/383\/e89\/288383e8928c14b67b4387f6e07497cc.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0418\u043b\u0438 cmd+opt+v: \u0438\u043a\u043e\u043d\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435<\/figcaption><\/div>\n<\/figure>\n<h3>\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 svg-react-preview<\/h3>\n<p>\u0421\u0442\u0430\u0432\u0438\u0442\u0435 \u043a\u0443\u0440\u0441\u043e\u0440 \u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u044c svg-\u0442\u0435\u0433\u0430 \u0432 .tsx\/.jsx \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u0442\u0430\u0441\u043a. \u0414\u0430\u043b\u044c\u0448\u0435 CLI:<\/p>\n<ol>\n<li>\n<p>\u041f\u0430\u0440\u0441\u0438\u0442 \u0444\u0430\u0439\u043b \u0447\u0435\u0440\u0435\u0437 swc, \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0439 .<\/p>\n<\/li>\n<li>\n<p>\u041d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0435\u0433\u043e \u0432 \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 standalone .svg: className \u2192 class, strokeWidth \u2192 stroke-width, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 {props} \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u044b (24, currentColor, \u2026) \u0438\u043b\u0438 \u0432\u044b\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u0441\u043f\u0440\u0435\u0434 {&#8230;props} \u0434\u0440\u043e\u043f\u0430\u0435\u0442\u0441\u044f, PascalCase-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440-<\/p>\n<\/li>\n<li>\n<p>\u041f\u0438\u0448\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 $TMPDIR\/svg-react-preview\/&lt;\u0445\u0435\u0448&gt;.svg (\u0438\u043c\u044f \u2014 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 xxhash \u043e\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u043f\u0440\u0435\u0432\u044c\u044e \u043d\u0435 \u043f\u043b\u043e\u0434\u0438\u0442 \u0444\u0430\u0439\u043b\u044b).<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 <code>zed &lt;path&gt;<\/code> \u2014 Zed \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 preview-\u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0440\u044f\u0434\u043e\u043c \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u043c.<\/p>\n<\/li>\n<\/ol>\n<h3>\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b<\/h3>\n<ul>\n<li>\n<p><strong>macOS<\/strong> \u2014 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. AppleScript \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0444\u0430\u0439\u043b \u0432 Zed, \u0441\u0438\u043d\u0442\u0435\u0437\u0438\u0440\u0443\u0435\u0442 Cmd+Shift+V \u0434\u043b\u044f preview-\u0440\u0435\u0436\u0438\u043c\u0430, \u043f\u043e\u0442\u043e\u043c Cmd+Shift+[ + Cmd+W \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043b\u0438\u0448\u043d\u044e\u044e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u2014 \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u043d\u0430 preview-\u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0437\u0430 \u0437\u0430\u043f\u0443\u0441\u043a. \u0426\u0435\u043d\u0430: \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0430\u0442\u044c Zed.app \u043f\u0440\u0430\u0432\u0430 \u0432 <strong>\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u2192 \u041a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2192 \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f<\/strong> (macOS \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e).<\/p>\n<\/li>\n<li>\n<p><strong>Linux \/ Windows<\/strong> \u2014 \u0444\u0430\u0439\u043b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0442\u0435\u043a\u0441\u0442, \u043e\u0434\u0438\u043d Ctrl+Shift+V \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 preview. \u0417\u0430\u0442\u043e \u043d\u0438\u043a\u0430\u043a\u0438\u0445 permission-\u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/h3>\n<pre><code>cargo install --git https:\/\/github.com\/Segodnya\/svg-react-preview<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0411\u0438\u043d\u0430\u0440\u044c \u043f\u0430\u0434\u0430\u0435\u0442 \u0432 ~\/.cargo\/bin\/svg-react-preview \u2014 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043e\u043d \u0432 PATH.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0432 Zed: Zed \u2192 CLI \u2192 Install zed Shell Command (\u043d\u0443\u0436\u0435\u043d zed \u043d\u0430 PATH, \u0447\u0442\u043e\u0431\u044b CLI \u043c\u043e\u0433\u043b\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0432 \u0432\u0430\u0448\u0435\u043c \u0443\u0436\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u043c Zed).<\/p>\n<p>\u0412 ~\/.config\/zed\/tasks.json:<\/p>\n<pre><code class=\"json\"> [   {     \"label\": \"Preview SVG (cursor)\",     \"command\": \"svg-react-preview\",     \"env\": {       \"SVG_REACT_PREVIEW_FILE\":   \"{ZED_FILE}\",       \"SVG_REACT_PREVIEW_ROW\":    \"{ZED_ROW}\",       \"SVG_REACT_PREVIEW_COLUMN\": \"${ZED_COLUMN}\"     },     \"use_new_terminal\": false,     \"allow_concurrent_runs\": true,     \"reveal\": \"no_focus\",     \"hide\": \"on_success\",     \"save\": \"none\"   } ]<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0445\u043e\u0442\u043a\u0435\u0439 \u0432 ~\/.config\/zed\/keymap.json:<\/p>\n<pre><code class=\"json\">[  {    \"context\": \"Editor\",    \"bindings\": {      \"alt-shift-v\": [\"task::Spawn\", { \"task_name\": \"Preview SVG (cursor)\" }]    }  }]<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e. \u041a\u0443\u0440\u0441\u043e\u0440 \u0432 &lt;svg&gt;&lt;\/svg&gt; \u2192 Alt+Shift+V \u2192 \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u0430\u044f \u0438\u043a\u043e\u043d\u043a\u0430.<\/p>\n<p>\u0427\u0442\u043e \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>Rust, swc \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 TSX\/JSX.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 macOS \u2014 osascript \u0434\u043b\u044f AppleScript-\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f Zed (\u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b, \u0434\u043e\u0441\u043b\u0430\u0442\u044c \u0445\u043e\u0442\u043a\u0435\u0439, \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043b\u0438\u0448\u043d\u044e\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443). \u0425\u043e\u0442\u043a\u0435\u0439 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 SVG_REACT_PREVIEW_HOTKEY, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c (=none) \u0435\u0441\u043b\u0438 \u0432 Zed \u0441\u0432\u043e\u0439 \u043a\u0435\u0439\u0431\u0438\u043d\u0434\u0438\u043d\u0433.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 CI: clippy pedantic+nursery, llvm-cov \u0441 \u0433\u0435\u0439\u0442\u043e\u043c 95%, cargo-deny, cargo-audit, cargo-machete, cargo-udeps, cargo-mutants. Hook \u0447\u0435\u0440\u0435\u0437 cargo-husky.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0430\u043c \u0431\u0443\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u041d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043b\u044c \u043e\u0431\u0449\u0430\u044f:<\/p>\n<ul>\n<li>\n<p>\u0423\u0434\u043e\u0431\u043d\u043e \u043b\u0438?<\/p>\n<\/li>\n<li>\n<p>Linux\/Windows-\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438: \u0440\u0443\u0447\u043d\u043e\u0439 Ctrl+Shift+V \u2014 \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e \u0438\u043b\u0438 \u0441\u0442\u043e\u0438\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a\u0438\u0435 JSX-\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u043f\u0430\u0440\u0441\u0435\u0440 \u0443\u0440\u043e\u043d\u0438\u0442? \u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0437 \u0432\u0430\u0448\u0438\u0445 \u043a\u043e\u0434\u043e\u0432\u044b\u0445 \u0431\u0430\u0437 \u2014 \u043b\u0443\u0447\u0448\u0438\u0435 \u0442\u0435\u0441\u0442\u044b :).<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u041a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0448\u0435\u043d \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f: <a href=\"https:\/\/github.com\/Segodnya\/svg-react-preview\" rel=\"noopener noreferrer nofollow\">github.com\/Segodnya\/svg-react-preview<\/a><\/p>\n<\/blockquote>\n<p><strong>P.S.<\/strong> \u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u043b \u043f\u043e\u0441\u0442 \u043d\u0430 r\/Zed. \u0415\u0441\u043b\u0438 \u0448\u0442\u0443\u043a\u0430 \u0432\u0430\u043c \u0437\u0430\u0448\u043b\u0430 \u2014 \u0431\u0443\u0434\u0435\u0442 \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0442\u0435 \u0442\u0430\u043c \u0430\u043f\u0432\u043e\u0443\u0442\u043e\u043c \u0438\u043b\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u043c: <a href=\"https:\/\/www.reddit.com\/r\/ZedEditor\/comments\/1t1pe90\/svgreactpreview_see_what_your_inline_jsx_svg\/?utm_source=share&amp;utm_medium=web3x&amp;utm_name=web3xcss&amp;utm_term=1&amp;utm_content=share_button\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0430<\/a>.<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1032500\/\">https:\/\/habr.com\/ru\/articles\/1032500\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0411\u043e\u043b\u044c\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0448\u044c \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u0438 \u043f\u0440\u0438\u0432\u0435\u0442:\u0422\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 GobletIcon.tsx \u0441\u043e \u0441\u0442\u0435\u043d\u043e\u0439 path-\u043e\u0432\u0423 Zed \u0435\u0441\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 preview \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 .svg-\u0444\u0430\u0439\u043b\u043e\u0432. \u041d\u043e \u0434\u043b\u044f SVG, \u043b\u0435\u0436\u0430\u0449\u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 JSX, \u2014 \u043d\u0438\u0447\u0435\u0433\u043e. \u0422\u0430\u043a \u0436\u0435, \u043a\u0441\u0442\u0430\u0442\u0438, \u0438 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432.\u041f\u043e\u0447\u0435\u043c\u0443 task, \u0430 \u043d\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f Zed. \u041d\u043e extension API \u0443 Zed \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u0430\u0451\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e: \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u0431\u0443\u0444\u0435\u0440 \u0432 \u043f\u0440\u0435\u0432\u044c\u044e-\u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f. \u041a\u043e\u0433\u0434\u0430 API \u0434\u043e\u0440\u0430\u0441\u0442\u0451\u0442 \u2014 \u0441 \u0440\u0430\u0434\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0443. \u0410 \u043f\u043e\u043a\u0430 \u2014 Zed-\u0442\u0430\u0441\u043a + \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f CLI.\u0418\u043b\u0438 cmd+opt+v: \u0438\u043a\u043e\u043d\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 svg-react-preview\u0421\u0442\u0430\u0432\u0438\u0442\u0435 \u043a\u0443\u0440\u0441\u043e\u0440 \u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u044c svg-\u0442\u0435\u0433\u0430 \u0432 .tsx\/.jsx \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u0442\u0430\u0441\u043a. \u0414\u0430\u043b\u044c\u0448\u0435 CLI:\u041f\u0430\u0440\u0441\u0438\u0442 \u0444\u0430\u0439\u043b \u0447\u0435\u0440\u0435\u0437 swc, \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0439 .\u041d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0435\u0433\u043e \u0432 \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 standalone .svg: className \u2192 class, strokeWidth \u2192 stroke-width, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 {props} \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u044b (24, currentColor, \u2026) \u0438\u043b\u0438 \u0432\u044b\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u0441\u043f\u0440\u0435\u0434 {&#8230;props} \u0434\u0440\u043e\u043f\u0430\u0435\u0442\u0441\u044f, PascalCase-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440-\u041f\u0438\u0448\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 $TMPDIR\/svg-react-preview\/&lt;\u0445\u0435\u0448&gt;.svg (\u0438\u043c\u044f \u2014 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 xxhash \u043e\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u043f\u0440\u0435\u0432\u044c\u044e \u043d\u0435 \u043f\u043b\u043e\u0434\u0438\u0442 \u0444\u0430\u0439\u043b\u044b).\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 zed &lt;path&gt; \u2014 Zed \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 preview-\u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0440\u044f\u0434\u043e\u043c \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u043c.\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044bmacOS \u2014 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. AppleScript \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0444\u0430\u0439\u043b \u0432 Zed, \u0441\u0438\u043d\u0442\u0435\u0437\u0438\u0440\u0443\u0435\u0442 Cmd+Shift+V \u0434\u043b\u044f preview-\u0440\u0435\u0436\u0438\u043c\u0430, \u043f\u043e\u0442\u043e\u043c Cmd+Shift+[ + Cmd+W \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043b\u0438\u0448\u043d\u044e\u044e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u2014 \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u043d\u0430 preview-\u0432\u043a\u043b\u0430\u0434\u043a\u0430 \u0437\u0430 \u0437\u0430\u043f\u0443\u0441\u043a. \u0426\u0435\u043d\u0430: \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0430\u0442\u044c Zed.app \u043f\u0440\u0430\u0432\u0430 \u0432 \u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u2192 \u041a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2192 \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f (macOS \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442 \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e).Linux \/ Windows \u2014 \u0444\u0430\u0439\u043b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0442\u0435\u043a\u0441\u0442, \u043e\u0434\u0438\u043d Ctrl+Shift+V \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 preview. \u0417\u0430\u0442\u043e \u043d\u0438\u043a\u0430\u043a\u0438\u0445 permission-\u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432.\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430cargo install &#8212;git https:\/\/github.com\/Segodnya\/svg-react-preview\u0411\u0438\u043d\u0430\u0440\u044c \u043f\u0430\u0434\u0430\u0435\u0442 \u0432 ~\/.cargo\/bin\/svg-react-preview \u2014 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043e\u043d \u0432 PATH.\u0414\u0430\u043b\u044c\u0448\u0435 \u0432 Zed: Zed \u2192 CLI \u2192 Install zed Shell Command (\u043d\u0443\u0436\u0435\u043d zed \u043d\u0430 PATH, \u0447\u0442\u043e\u0431\u044b CLI \u043c\u043e\u0433\u043b\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0432 \u0432\u0430\u0448\u0435\u043c \u0443\u0436\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u043c Zed).\u0412 ~\/.config\/zed\/tasks.json: [   {     &#171;label&#187;: &#171;Preview SVG (cursor)&#187;,     &#171;command&#187;: &#171;svg-react-preview&#187;,     &#171;env&#187;: {       &#171;SVG_REACT_PREVIEW_FILE&#187;:   &#171;{ZED_FILE}&#187;,       &#171;SVG_REACT_PREVIEW_ROW&#187;:    &#171;{ZED_ROW}&#187;,       &#171;SVG_REACT_PREVIEW_COLUMN&#187;: &#171;${ZED_COLUMN}&#187;     },     &#171;use_new_terminal&#187;: false,     &#171;allow_concurrent_runs&#187;: true,     &#171;reveal&#187;: &#171;no_focus&#187;,     &#171;hide&#187;: &#171;on_success&#187;,     &#171;save&#187;: &#171;none&#187;   } ]\u0418 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0445\u043e\u0442\u043a\u0435\u0439 \u0432 ~\/.config\/zed\/keymap.json:[  {    &#171;context&#187;: &#171;Editor&#187;,    &#171;bindings&#187;: {      &#171;alt-shift-v&#187;: [&#171;task::Spawn&#187;, { &#171;task_name&#187;: &#171;Preview SVG (cursor)&#187; }]    }  }]\u0413\u043e\u0442\u043e\u0432\u043e. \u041a\u0443\u0440\u0441\u043e\u0440 \u0432 &lt;svg&gt;&lt;\/svg&gt; \u2192 Alt+Shift+V \u2192 \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u0430\u044f \u0438\u043a\u043e\u043d\u043a\u0430.\u0427\u0442\u043e \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c:Rust, swc \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 TSX\/JSX.\u041d\u0430 macOS \u2014 osascript \u0434\u043b\u044f AppleScript-\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f Zed (\u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b, \u0434\u043e\u0441\u043b\u0430\u0442\u044c \u0445\u043e\u0442\u043a\u0435\u0439, \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043b\u0438\u0448\u043d\u044e\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443). \u0425\u043e\u0442\u043a\u0435\u0439 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 SVG_REACT_PREVIEW_HOTKEY, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c (=none) \u0435\u0441\u043b\u0438 \u0432 Zed \u0441\u0432\u043e\u0439 \u043a\u0435\u0439\u0431\u0438\u043d\u0434\u0438\u043d\u0433.\u041f\u043e\u043b\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 CI: clippy pedantic+nursery, llvm-cov \u0441 \u0433\u0435\u0439\u0442\u043e\u043c 95%, cargo-deny, cargo-audit, cargo-machete, cargo-udeps, cargo-mutants. Hook \u0447\u0435\u0440\u0435\u0437 cargo-husky.\u0421\u0430\u043c \u0431\u0443\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u041d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043b\u044c \u043e\u0431\u0449\u0430\u044f:\u0423\u0434\u043e\u0431\u043d\u043e \u043b\u0438?Linux\/Windows-\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438: \u0440\u0443\u0447\u043d\u043e\u0439 Ctrl+Shift+V \u2014 \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e \u0438\u043b\u0438 \u0441\u0442\u043e\u0438\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c?\u041a\u0430\u043a\u0438\u0435 JSX-\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u043f\u0430\u0440\u0441\u0435\u0440 \u0443\u0440\u043e\u043d\u0438\u0442? \u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0437 \u0432\u0430\u0448\u0438\u0445 \u043a\u043e\u0434\u043e\u0432\u044b\u0445 \u0431\u0430\u0437 \u2014 \u043b\u0443\u0447\u0448\u0438\u0435 \u0442\u0435\u0441\u0442\u044b :).\u041a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0448\u0435\u043d \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f: github.com\/Segodnya\/svg-react-previewP.S. \u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u043b \u043f\u043e\u0441\u0442 \u043d\u0430 r\/Zed. \u0415\u0441\u043b\u0438 \u0448\u0442\u0443\u043a\u0430 \u0432\u0430\u043c \u0437\u0430\u0448\u043b\u0430 \u2014 \u0431\u0443\u0434\u0435\u0442 \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0442\u0435 \u0442\u0430\u043c \u0430\u043f\u0432\u043e\u0443\u0442\u043e\u043c \u0438\u043b\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u043c: \u0441\u0441\u044b\u043b\u043a\u0430.\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1032500\/<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-478898","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/478898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=478898"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/478898\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=478898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=478898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=478898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}