javascript - IcoMoon SVG 不显示-6ren

javascript - IcoMoon SVG 不显示

转载作者：行者123 更新时间：2023-12-03 05:40:01

24

4

我用 IcoMoon 创建了一些图标，但我稍微改变了实现。我将它们与 React 一起使用，因此我没有在 <body> 中添加 SVG 定义。 HTML 标签，然后使用 xLink将其包含到我的页面中。

我像这样分割图标(作为示例):

function playIcon() {
  return (
    <symbol id="icon-stop" viewBox="0 0 25 32">
      <path className="path1" d="M24.704 16.544l-23.712 13.184q-0.416 0.224-0.704 0.064t-0.288-0.64v-26.304q0-0.448 0.288-0.64t0.704 0.064l23.712 13.184q0.416 0.224 0.416 0.544t-0.416 0.544z"></path>
    </symbol>
  );
}

function stopIcon() {
  return (
    <symbol id="icon-stop" viewBox="0 0 27 32">
      <path className="path1" d="M27.424 3.424v25.152q0 0.448-0.32 0.8t-0.832 0.352h-25.12q-0.48 0-0.8-0.352t-0.352-0.8v-25.152q0-0.448 0.352-0.8t0.8-0.352h25.12q0.48 0 0.832 0.352t0.32 0.8z"></path>
    </symbol>
  );
}

function renderIcon(icon) {
  switch (icon) {
    case 'play': 
      return playIcon();
    case 'stop':
      return stopIcon();
  }
}

const Icon = ({ icon }) => (
  <svg className={`icon icon-${icon}`} style={{position: 'absolute'}, {width: 0}, {height: 0}, {overflow: 'hidden'}} version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <defs>
     {renderIcon(icon)}
    </defs>
  </svg>
);

export default Icon;

相应的 SCSS(稍微清理了一下 IcoMoon CSS)是:

.icon {
  display: inline-block;
  fill: #000;
  height: 1em;
  stroke: #000;
  stroke-width: 0;
  width: 1em;
}

.icon-play {
  width: .78515625em;
}

.icon-stop {
  width: .857421875em;
}

当我使用 Chrome 开发工具时，我可以看到 SVG 并且代码看起来不错，但它不会渲染任何内容。只是一个空白的小块。

我创建了一个JSFiddle与渲染的 SVG 一起使用。这里它也呈现为空白。

最佳答案

viewBox 属性似乎有问题。当我删除 defs 和 symbol 并更新 viewBox 标签时，它似乎可以工作。这是updated jsFiddle 。清理那些 svgs 就可以了。

<svg class="icon icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden;" width="24" height="30" viewBox="0 0 24 30">
   <g id="icon-play">
     <path d="M24.704 16.544l-23.712 13.184q-0.416 0.224-0.704 0.064t-0.288-0.64v-26.304q0-0.448 0.288-0.64t0.704 0.064l23.712 13.184q0.416 0.224 0.416 0.544t-0.416 0.544z"></path>
   </g>
</svg>

关于javascript - IcoMoon SVG 不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40576371/

24

4

0

文章推荐： api - 如何定义 API 的好坏？

文章推荐： maven - Gradle设置中的Gradle存储库而不是构建？

文章推荐： ruby-on-rails - Rails 中的路由别名

css - Icomoon - 我可以使用 icomoon chrome 插件在没有任何许可的情况下生成图标字体吗？
我正在开发供公众使用的 Web 应用程序(可能是银行业或零售业)。我可以在没有任何许可的情况下使用 ico-moon 生成器生成我需要的图标，还是我需要付费并获得使用许可？请帮助我理解这一点。最佳答
html - 如何将 icomoon 字体更新为现有的 icomoon 字体？
将字体更新为现有字体我已经在我们的网站上使用了 5 种从 icomoon 下载的 icomoon 字体。我想再包含 2 种字体。我应该怎么办？我可以将新的 2 种字体添加到现有字体吗？如果是，我该
html - IcoMoon 字体加倍
我认为当我使用 Icomoon 字体时，它们会加倍是不正常的。所以在我的例子中，会并排显示两个相同的图标，而我只为一个图标编码。如果我应用颜色等 CSS 属性，两个图标的 react 相同。如何删
css - Icomoon 和文字或图标的颜色
我已阅读 StackOverflow 上的帖子。据我了解，图标是作为文本进行管理的。我。但是元素符号在图标字体所在的类中。如何更改图标而不是文本的颜色？我尝试更改源，但没有成功。 src:url(
css - IcoMoon App图标字体显示为
一切都很好，但是当我使用 ../时它不起作用。要调用我使用的 CSS:它确实显示为 。我在 MainFolder/Albumes/Clarity_Deluxe_Edition/index.html
css - IcoMoon 加载不正确
将 Sencha Architect 2 与 Sencha Touch 2.2.1 结合使用我已按照本教程进行操作，我的代码完全相同: https://vimeo.com/66191690 因为我正
html - icomoon 字体在部署时未显示
我的示例网站是 www.peshaa.com 我正在玩 icomoon 字体并使用他们的 icon-droplet。它应该出现在文本“世界宗教”之前，但我得到的只是所有浏览器中的一个矩形。但是，当我测
css - icomoon 创建一个包含多个类别的符号
我想自己创建一个图标字体。我在 svg 中有以下符号:symbol代码如下所示: image/svg+xml .st0{fill:#FFFFFF;} 在 icomoon.io 上创建字体时，
html - Icomoon 自定义字体多种颜色
我正在使用 Icomoon 创建自定义字体图标，我遇到了图标需要在同一范围内的情况，例如: 但是它们都需要有不同的颜色。有可能做到这一点吗？这是 JSFIDDLE包含所有代码，但我似乎无法在 js
javascript - IcoMoon SVG 不显示
我用 IcoMoon 创建了一些图标，但我稍微改变了实现。我将它们与 React 一起使用，因此我没有在中添加 SVG 定义。 HTML 标签，然后使用 xLink将其包含到我的页面中。我像这样
html - 使用 IcoMoon 为输入类型提交添加图标
我正在尝试将搜索图标添加到中通过使用 IcoMoon。我不能包括里面 . 我尝试了以下使用伪元素的方法 :before , 但不起作用。 HTML:
css - 一些 Icomoon 图标不会显示
我在应用程序中使用 Icomoon - 我遇到了一些图标无法显示的问题。我已经通过 Icomoon App 下载了所有图标，这是最新版本 - 所有 450 个都已选中。我已经在没有其他 CSS 的空
css - 如何加载 Icomoon 字体
我想知道如何合并 Icomoon字体到我的网站，但我无法加载字体。我下载了文件并将它们复制到我的/fonts 目录中。然后我按照说明here并将 icomoon/fonts 中的文件复制到/fonts
css - Icomoon.ttf 未加载
我遇到了 icomoon 字体的问题。我根本无法加载它们。但是，如果我点击这个 url: localhost:8080/assets/fonts/icomoon.ttf(我正在做的元素) 我可以将 i
css - 从 icomoon 加载自定义字体
我正在使用 icomoon 创建自定义字体，但无法加载它。我已经使用 font book 检查了它，那里似乎没问题，但我无法加载它。 @font-face { font-family: 'icom
css - 如何更改 icomoon 图标的图标颜色
我已经从icomoom 下载了一些图标。但是图标背景颜色是黑色和白色。我想给自己的颜色。任何人都可以告诉我该怎么做吗？当我下载图标时，我得到了以下style.css @font-face {
css - 如何使用多种 Icomoon 字体(多种字体系列)
如果您只有一个字体系列，Icomoon 字体工作正常，但是如果我创建了另一个字体系列并想与第一个一起使用怎么办？我试图做这样的事情: @font-face { font-family: 'icom
html - css 悬停动画在 icomoon 中不起作用
我有带有 css3 悬停动画的菜单(toTopFromBottom)。现在我需要将 fontawesome 图标更改为 icomoon 图标并添加此效果: HTML:
firefox - icoMoon 字体在 Firefox 上不显示
Firefox 上的图标替换字体跨浏览器没有问题，目前仅显示内容文本，但不显示 icomoon 文本替换。代码 Sass + Magento + .htaccess 显示的源代码，任何想法或帮助将不胜
javascript - 如何将 icomoon 图标添加到 Canvas ？
如何通过fillText()方法将icomoons中的图标添加到canvas中？ ctx.font = '10px'; ctx.fillText = 'white'; ctx.fillText(??)

首页

博学

6Ren·AI

商城

javascript - IcoMoon SVG 不显示