时间戳

首页 > 解决方案 > 在盖茨比主题中更改徽标

javascript - 在盖茨比主题中更改徽标

问题描述

这是我的 logo.js 文件

  
import React from 'react';

export default function Logo(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="180" height="34" viewBox="0 0 180 34">

                <g transform="scale(9.375) translate(10, 10)">
                    <defs id="SvgjsDefs3939"/><g id="SvgjsG3940" featureKey="v37d4h-0" transform="matrix(1.0454449342397494,0,0,1.0454449342397494,-2.260825418305193,-28.74973369756514)" fill="#000"><path xmlns="http://www.w3.org/2000/svg" d="M53.2,53.6c0,0,33.8-2.3,43.1-26.1C96.3,27.5,110.3,53.6,53.2,53.6z M56.8,55c37.7,11.1,34.6-6.6,34.6-6.6  C81.9,56.2,56.8,55,56.8,55z M56.2,56.7c27.9,18,29.6,2.9,29.6,2.9C76.2,63.7,56.2,56.7,56.2,56.7z M55.8,58.7  c16.1,19.7,20.9,9.1,20.9,9.1C68.7,68.4,55.8,58.7,55.8,58.7z M54.9,60.9c6.2,16.6,11.7,10.7,11.7,10.7  C61.3,70.3,54.9,60.9,54.9,60.9z M46.8,53.6c0,0-33.8-2.3-43.1-26.1C3.7,27.5-10.4,53.6,46.8,53.6z M8.5,48.4c0,0-3.1,17.7,34.6,6.6  C43.1,55,18,56.2,8.5,48.4z M14.1,59.7c0,0,1.7,15.1,29.6-2.9C43.7,56.7,23.7,63.7,14.1,59.7z M23.3,67.7c0,0,4.8,10.6,20.9-9.1  C44.2,58.7,31.2,68.4,23.3,67.7z M33.3,71.6c0,0,5.5,5.9,11.7-10.7C45,60.9,38.7,70.3,33.3,71.6z"/></g><g id="SvgjsG3941" featureKey="nameFeature-0" transform="matrix(1.1137098505100793,0,0,1.1137098505100793,119.17585549658874,9.520547450521091)" fill="#000"><path d="M16.3 13.04 q0 0.24 -0.04 0.84 q-0.16 1.84 -1.23 3.3 t-2.76 2.28 t-3.65 0.82 q-2.14 0 -3.95 -1.02 t-2.87 -2.76 t-1.06 -3.8 q0 -2.04 1.06 -3.79 t2.87 -2.77 t3.95 -1.02 q2.02 0 3.77 0.95 t2.85 2.57 l-2.72 1.58 q-0.72 -0.98 -1.74 -1.6 t-2.16 -0.62 q-1.28 0 -2.37 0.65 t-1.73 1.73 t-0.64 2.32 t0.64 2.33 t1.73 1.74 t2.37 0.65 q0.92 0 1.82 -0.37 t1.56 -1.01 t0.88 -1.4 l-5.46 0 l0 -2.78 l8.84 0 q0.04 0.8 0.04 1.18 z M21.96 19.26 q-1.8 -1.02 -2.86 -2.77 t-1.06 -3.81 q0 -2.04 1.06 -3.79 t2.86 -2.77 t3.94 -1.02 t3.96 1.02 t2.88 2.77 t1.06 3.79 q0 2.06 -1.06 3.81 t-2.88 2.77 t-3.96 1.02 t-3.94 -1.02 z M23.54 8.63 q-1.08 0.65 -1.72 1.73 t-0.64 2.32 t0.64 2.33 t1.72 1.75 t2.36 0.66 t2.37 -0.66 t1.72 -1.75 t0.63 -2.33 t-0.63 -2.32 t-1.72 -1.73 t-2.37 -0.65 t-2.36 0.65 z M36.38 5.380000000000001 l6.04 0 q3.26 0 5.34 1.84 q1.12 0.98 1.7 2.37 t0.58 3.09 q0 1.66 -0.6 3.09 t-1.68 2.41 q-1 0.88 -2.37 1.35 t-2.97 0.47 l-6.04 0 l0 -14.62 z M42.42 17.259999999999998 q1.88 0 3.15 -0.98 t1.27 -3.58 t-1.28 -3.58 t-3.14 -0.98 l-2.88 0 l0 9.12 l2.88 0 z M56.019999999999996 16.87 q1.42 0.57 2.6 0.57 q1.24 0 1.97 -0.48 t0.73 -1.14 q0 -0.54 -0.43 -0.88 t-1.09 -0.51 t-1.74 -0.37 q-1.44 -0.24 -2.64 -0.62 t-2.18 -1.32 t-0.98 -2.54 q0 -2.36 1.73 -3.39 t4.07 -1.03 q1.8 0 3.13 0.49 t2.65 1.47 l-1.76 2.4 q-0.98 -0.7 -2.04 -1.1 t-2.1 -0.4 q-0.92 0 -1.72 0.33 t-0.8 1.11 q0 0.48 0.41 0.77 t0.9 0.42 t1.59 0.37 l0.72 0.14 q1.66 0.32 2.75 0.71 t1.89 1.31 t0.8 2.56 q0 2.22 -1.57 3.38 t-4.25 1.16 q-3.92 0 -6.6 -2.28 l1.68 -2.42 q0.86 0.72 2.28 1.29 z M76.16 16.87 q1.42 0.57 2.6 0.57 q1.24 0 1.97 -0.48 t0.73 -1.14 q0 -0.54 -0.43 -0.88 t-1.09 -0.51 t-1.74 -0.37 q-1.44 -0.24 -2.64 -0.62 t-2.18 -1.32 t-0.98 -2.54 q0 -2.36 1.73 -3.39 t4.07 -1.03 q1.8 0 3.13 0.49 t2.65 1.47 l-1.76 2.4 q-0.98 -0.7 -2.04 -1.1 t-2.1 -0.4 q-0.92 0 -1.72 0.33 t-0.8 1.11 q0 0.48 0.41 0.77 t0.9 0.42 t1.59 0.37 l0.72 0.14 q1.66 0.32 2.75 0.71 t1.89 1.31 t0.8 2.56 q0 2.22 -1.57 3.38 t-4.25 1.16 q-3.92 0 -6.6 -2.28 l1.68 -2.42 q0.86 0.72 2.28 1.29 z M92.89999999999999 4.92 l8.02 15.08 l-3.46 0 l-1.16 -2.24 l-6.82 0 l-1.12 2.24 l-3.48 0 z M94.78 15.059999999999999 l-1.88 -3.82 l-1.86 3.82 l3.74 0 z M105.74 20 l-3.14 0 l0 -15.08 l10.08 8.92 l0 -8.44 l3.16 0 l0 15.06 l-10.1 -8.78 l0 8.32 z M119.16 5.380000000000001 l6.04 0 q3.26 0 5.34 1.84 q1.12 0.98 1.7 2.37 t0.58 3.09 q0 1.66 -0.6 3.09 t-1.68 2.41 q-1 0.88 -2.37 1.35 t-2.97 0.47 l-6.04 0 l0 -14.62 z M125.19999999999999 17.259999999999998 q1.88 0 3.15 -0.98 t1.27 -3.58 t-1.28 -3.58 t-3.14 -0.98 l-2.88 0 l0 9.12 l2.88 0 z M145.81 11.22 q-0.51 0.8 -1.33 1.14 q1 0.34 1.72 1.3 t0.72 2.1 q0 2.26 -1.44 3.25 t-3.68 0.99 l-6.32 0 l0 -14.62 l6.08 0 q4.76 0 4.76 4.06 q0 0.98 -0.51 1.78 z M141.62 11.18 q0.78 0 1.15 -0.48 t0.37 -1.14 q0 -0.58 -0.44 -1.01 t-1.06 -0.43 l-2.98 0 l0 3.06 l2.96 0 z M143.24 16.78 q0.52 -0.48 0.52 -1.18 t-0.52 -1.18 t-1.5 -0.48 l-3.08 0 l0 3.32 l3.14 0 q0.92 0 1.44 -0.48 z M152.74 19.26 q-1.8 -1.02 -2.86 -2.77 t-1.06 -3.81 q0 -2.04 1.06 -3.79 t2.86 -2.77 t3.94 -1.02 t3.96 1.02 t2.88 2.77 t1.06 3.79 q0 2.06 -1.06 3.81 t-2.88 2.77 t-3.96 1.02 t-3.94 -1.02 z M154.32 8.63 q-1.08 0.65 -1.72 1.73 t-0.64 2.32 t0.64 2.33 t1.72 1.75 t2.36 0.66 t2.37 -0.66 t1.72 -1.75 t0.63 -2.33 t-0.63 -2.32 t-1.72 -1.73 t-2.37 -0.65 t-2.36 0.65 z M164.84 5.4 l3.98 0 l3.78 5.04 l3.78 -5.04 l3.94 0 l-5.74 7.36 l5.64 7.24 l-3.96 0 l-3.66 -4.86 l-3.66 4.86 l-3.98 0 l5.66 -7.24 z"/></g>
                </g>
            </svg>
  );
}

这是错误

02:38:07 AM:

构建生产 JavaScript 和 CSS 包失败 - 64.512s

02:38:07 AM：错误生成 JavaScript 包失败

02:38:07 上午：7 |

02:38:07 上午：4 | 返回 （

02:38:07 上午：6 |

02:38:07 上午：| ^^^^^^^^^^^^

02:38:07 上午：8 |

02:38:07 上午：

5 |

02:38:08 AM：错误无法编译：错误：以代码 1 退出

它在这个存储库中https://github.com/robjwa20/gatsby-starter-rocket-docs

每当我尝试更改默认徽标时，它都不喜欢 JS。我认为我的 SVG 代码是错误的。

任何帮助，将不胜感激

标签： javascriptreactjssvggatsby

解决方案

您的 SVG 存在问题，这可能是它无法正常工作的原因。

将您更改/src/@rocketseat/components/Logo.js为：

import React from 'react';

export default function Logo(props) {
  return (
    <svg width={180} height={34} viewBox="0 0 180 34" fill="none" {...props}>
      <path 
       fill="red"
       d="M16.3 13.04 q0 0.24 -0.04 0.84 q-0.16 1.84 -1.23 3.3 t-2.76 2.28 t-3.65 0.82 q-2.14 0 -3.95 -1.02 t-2.87 -2.76 t-1.06 -3.8 q0 -2.04 1.06 -3.79 t2.87 -2.77 t3.95 -1.02 q2.02 0 3.77 0.95 t2.85 2.57 l-2.72 1.58 q-0.72 -0.98 -1.74 -1.6 t-2.16 -0.62 q-1.28 0 -2.37 0.65 t-1.73 1.73 t-0.64 2.32 t0.64 2.33 t1.73 1.74 t2.37 0.65 q0.92 0 1.82 -0.37 t1.56 -1.01 t0.88 -1.4 l-5.46 0 l0 -2.78 l8.84 0 q0.04 0.8 0.04 1.18 z M21.96 19.26 q-1.8 -1.02 -2.86 -2.77 t-1.06 -3.81 q0 -2.04 1.06 -3.79 t2.86 -2.77 t3.94 -1.02 t3.96 1.02 t2.88 2.77 t1.06 3.79 q0 2.06 -1.06 3.81 t-2.88 2.77 t-3.96 1.02 t-3.94 -1.02 z M23.54 8.63 q-1.08 0.65 -1.72 1.73 t-0.64 2.32 t0.64 2.33 t1.72 1.75 t2.36 0.66 t2.37 -0.66 t1.72 -1.75 t0.63 -2.33 t-0.63 -2.32 t-1.72 -1.73 t-2.37 -0.65 t-2.36 0.65 z M36.38 5.380000000000001 l6.04 0 q3.26 0 5.34 1.84 q1.12 0.98 1.7 2.37 t0.58 3.09 q0 1.66 -0.6 3.09 t-1.68 2.41 q-1 0.88 -2.37 1.35 t-2.97 0.47 l-6.04 0 l0 -14.62 z M42.42 17.259999999999998 q1.88 0 3.15 -0.98 t1.27 -3.58 t-1.28 -3.58 t-3.14 -0.98 l-2.88 0 l0 9.12 l2.88 0 z M56.019999999999996 16.87 q1.42 0.57 2.6 0.57 q1.24 0 1.97 -0.48 t0.73 -1.14 q0 -0.54 -0.43 -0.88 t-1.09 -0.51 t-1.74 -0.37 q-1.44 -0.24 -2.64 -0.62 t-2.18 -1.32 t-0.98 -2.54 q0 -2.36 1.73 -3.39 t4.07 -1.03 q1.8 0 3.13 0.49 t2.65 1.47 l-1.76 2.4 q-0.98 -0.7 -2.04 -1.1 t-2.1 -0.4 q-0.92 0 -1.72 0.33 t-0.8 1.11 q0 0.48 0.41 0.77 t0.9 0.42 t1.59 0.37 l0.72 0.14 q1.66 0.32 2.75 0.71 t1.89 1.31 t0.8 2.56 q0 2.22 -1.57 3.38 t-4.25 1.16 q-3.92 0 -6.6 -2.28 l1.68 -2.42 q0.86 0.72 2.28 1.29 z M76.16 16.87 q1.42 0.57 2.6 0.57 q1.24 0 1.97 -0.48 t0.73 -1.14 q0 -0.54 -0.43 -0.88 t-1.09 -0.51 t-1.74 -0.37 q-1.44 -0.24 -2.64 -0.62 t-2.18 -1.32 t-0.98 -2.54 q0 -2.36 1.73 -3.39 t4.07 -1.03 q1.8 0 3.13 0.49 t2.65 1.47 l-1.76 2.4 q-0.98 -0.7 -2.04 -1.1 t-2.1 -0.4 q-0.92 0 -1.72 0.33 t-0.8 1.11 q0 0.48 0.41 0.77 t0.9 0.42 t1.59 0.37 l0.72 0.14 q1.66 0.32 2.75 0.71 t1.89 1.31 t0.8 2.56 q0 2.22 -1.57 3.38 t-4.25 1.16 q-3.92 0 -6.6 -2.28 l1.68 -2.42 q0.86 0.72 2.28 1.29 z M92.89999999999999 4.92 l8.02 15.08 l-3.46 0 l-1.16 -2.24 l-6.82 0 l-1.12 2.24 l-3.48 0 z M94.78 15.059999999999999 l-1.88 -3.82 l-1.86 3.82 l3.74 0 z M105.74 20 l-3.14 0 l0 -15.08 l10.08 8.92 l0 -8.44 l3.16 0 l0 15.06 l-10.1 -8.78 l0 8.32 z M119.16 5.380000000000001 l6.04 0 q3.26 0 5.34 1.84 q1.12 0.98 1.7 2.37 t0.58 3.09 q0 1.66 -0.6 3.09 t-1.68 2.41 q-1 0.88 -2.37 1.35 t-2.97 0.47 l-6.04 0 l0 -14.62 z M125.19999999999999 17.259999999999998 q1.88 0 3.15 -0.98 t1.27 -3.58 t-1.28 -3.58 t-3.14 -0.98 l-2.88 0 l0 9.12 l2.88 0 z M145.81 11.22 q-0.51 0.8 -1.33 1.14 q1 0.34 1.72 1.3 t0.72 2.1 q0 2.26 -1.44 3.25 t-3.68 0.99 l-6.32 0 l0 -14.62 l6.08 0 q4.76 0 4.76 4.06 q0 0.98 -0.51 1.78 z M141.62 11.18 q0.78 0 1.15 -0.48 t0.37 -1.14 q0 -0.58 -0.44 -1.01 t-1.06 -0.43 l-2.98 0 l0 3.06 l2.96 0 z M143.24 16.78 q0.52 -0.48 0.52 -1.18 t-0.52 -1.18 t-1.5 -0.48 l-3.08 0 l0 3.32 l3.14 0 q0.92 0 1.44 -0.48 z M152.74 19.26 q-1.8 -1.02 -2.86 -2.77 t-1.06 -3.81 q0 -2.04 1.06 -3.79 t2.86 -2.77 t3.94 -1.02 t3.96 1.02 t2.88 2.77 t1.06 3.79 q0 2.06 -1.06 3.81 t-2.88 2.77 t-3.96 1.02 t-3.94 -1.02 z M154.32 8.63 q-1.08 0.65 -1.72 1.73 t-0.64 2.32 t0.64 2.33 t1.72 1.75 t2.36 0.66 t2.37 -0.66 t1.72 -1.75 t0.63 -2.33 t-0.63 -2.32 t-1.72 -1.73 t-2.37 -0.65 t-2.36 0.65 z M164.84 5.4 l3.98 0 l3.78 5.04 l3.78 -5.04 l3.94 0 l-5.74 7.36 l5.64 7.24 l-3.96 0 l-3.66 -4.86 l-3.66 4.86 l-3.98 0 l5.66 -7.24 z"></path>
    </svg>
  );
}

请注意，我向fill="red"SVG 添加了一个属性——你的没有颜色，所以你看不到它。我还在结束后删除了不必要的结束</g>标签</path>

一旦你这样做了，如果你在创建Logo.js文件后（ctrl+c然后npm start在你的终端中）还没有这样做，那么重新启动开发服务器，你应该可以启动并运行。

推荐阅读