如何将谷歌的Material Icons 字体中字符用svg格式引用到js文件中

要将谷歌的Material Icons字体中的字符用SVG格式引用到JS文件中，可以按照以下步骤进行：

1.访问Google的Material Icons网站，选择需要的图标，点击“Get the code”按钮，选择“SVG”选项卡，将SVG代码复制到剪贴板。

2.在JS文件中定义一个变量，将SVG代码粘贴到变量中。

var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-2.67 0-5.19-1.04-7.07-2.93s-2.93-4.4-2.93-7.07c0-2.67 1.04-5.19 2.93-7.07s4.4-2.93 7.07-2.93 5.19 1.04 7.07 2.93 2.93 4.4 2.93 7.07-1.04 5.19-2.93 7.07c-1.88 1.89-4.4 2.93-7.07 2.93z"/></svg>';

3.在HTML文件中，使用<i>标签来显示图标，将变量插入<i>标签中。

<i class="material-icons">
  {svgIcon}
</i>

注意：在插入变量时，要使用花括号{}包裹变量名，这表示将变量内容插入到标签中。

相关问题

vite-plugin-svg-icons中某些svg图标无法使用

你好！对于vite-plugin-svg-icons中无法使用的某些SVG图标，可能有几种可能的原因。以下是一些常见的解决方法：

1. 确保你已经正确安装和配置了vite-plugin-svg-icons插件。请确保在你的Vite项目中正确引入了该插件，并按照文档提供的方法进行配置。

2. 检查SVG图标文件的路径和命名。确保SVG文件在你的项目目录中，并且路径正确。同时，确保SVG文件的命名符合vite-plugin-svg-icons的要求，例如以`.icon.svg`结尾。

3. 检查SVG文件的内容和格式。有时候，SVG文件可能包含一些不受支持的元素或属性，导致无法正确使用。请确保SVG文件是有效的，并且没有任何错误。

4. 检查你的代码是否正确使用了SVG图标。在使用SVG图标时，请确保你在代码中正确引用了图标的名称。请参考vite-plugin-svg-icons的文档，了解如何在代码中使用SVG图标。

如果以上方法都没有解决问题，建议你仔细阅读vite-plugin-svg-icons的文档，查看是否有其他特殊要求或配置项需要注意。另外，你也可以尝试在相关的社区或论坛上寻求帮助，这样更容易得到针对性的解答。希望这些信息对你有帮助！如果你有其他问题，请随时提问。

摹客软件上下载的svg图片文件怎么在vue2项目中使用?

在 Vue2 项目中使用 SVG 图片，一般有两种方式：

1. 使用 Vue-Awesome 插件

Vue-Awesome 是一个基于 Font Awesome 的 Vue2 组件库，它支持在 Vue2 中使用 SVG 图标。可以先将 SVG 图片转为 Font Awesome 的格式，然后通过 Vue-Awesome 在项目中引用。

安装：

npm install vue-awesome

使用：

在组件中引用：

<template>
  <div>
    <fa :icon="['fas', 'coffee']" />
  </div>
</template>

<script>
import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

export default {
  components: {
    Fa
  },
  data() {
    return {
      faCoffee
    }
  }
}
</script>

2. 直接引用

将 SVG 文件放在项目中的某个目录下，然后在组件中直接引用即可。

<template>
  <div>
    <img src="../assets/svg/image.svg" alt="SVG Image" />
  </div>
</template>

需要注意的是，如果直接引用 SVG 文件，在一些浏览器上可能会出现问题，建议先将 SVG 文件转为 Base64 编码的字符串再引用。