vue中保存的icon用什么 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

在Vue中，可以使用两种方式来保存和使用图标：

使用字体图标：可以通过引入字体文件（.woff、.woff2等）来使用字体图标。常见的字体图标库有Font Awesome、Material Icons等。在Vue中，可以通过将字体文件放置在项目的静态资源文件夹（如public或assets）中，然后在需要使用图标的组件中引入字体文件，并使用相应的类名来显示图标。

示例代码：

<template>
  <div>
    <i class="fa fa-user"></i>
    <i class="material-icons">account_circle</i>
  </div>
</template>

<script>
import 'font-awesome/css/font-awesome.css'

export default {
  // ...
}
</script>

使用矢量图标：可以使用矢量图标库（如SVG图标库）来保存和使用图标。可以将矢量图标文件（.svg）放置在项目的静态资源文件夹中，然后在需要使用图标的组件中通过引入和渲染SVG文件来显示图标。

示例代码：

<template>
  <div>
    <SVGIcon name="user" />
  </div>
</template>

<script>
import SVGIcon from '@/components/SVGIcon.vue'

export default {
  components: {
    SVGIcon
  },
  // ...
}
</script>

需要注意的是，在使用字体图标或矢量图标时，需要根据图标库的使用文档来正确配置和调用相应的图标。同时，可以根据实际需求，通过自定义组件或指令来封装和简化图标的使用。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中保存icon有多种方式，具体取决于您使用的工具和个人偏好。下面列出了几种常用的保存icon的方式。

使用矢量图标库：最常见的方式是使用矢量图标库，如Font Awesome、Material Icons等。这些库提供了大量的矢量图标，您可以通过将图标的class名添加到HTML元素上来使用。在Vue项目中使用这些库非常简单，您可以在项目中安装对应的库，并在需要使用图标的地方通过class名来创建图标。
使用SVG图标：如果您有自定义的SVG图标，您可以直接将SVG文件保存在您的Vue项目中，并在需要使用的地方引用。Vue可以直接将SVG文件作为组件使用，您只需要在Vue组件中引用SVG文件即可，这样会将SVG文件转换为Vue组件。
使用图片图标：除了矢量图标，您还可以使用图片图标。这些图标可以是PNG、JPEG等格式的图片文件。您可以将这些图标文件保存在您的Vue项目中的某个文件夹中，并在需要使用的地方通过img标签引用。
使用字体图标：与矢量图标类似，字体图标也是使用class名来创建图标。不同之处在于，字体图标是通过字体文件来实现的。您可以选择将字体图标文件保存在项目中，然后在需要使用图标的地方通过class名创建图标。
使用第三方插件：除了上述方式，还有许多第三方插件可供选择，这些插件可以简化icon的使用和管理。例如，vue-iconfont、vue-icon、vue-fontawesome等插件都是特别为Vue设计的，提供了更方便的方法来使用和管理icon。这些插件通常提供了一组自定义的组件供您使用，您可以根据自己的需求来选择适合的插件。

总之，在Vue中保存icon的方式有多种选择，您可以根据自己的需求和喜好来选择适合的方式。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，保存的icon可以使用字体图标或者SVG图标。

字符图标（Font Icons）：常用的字体图标库有Font Awesome和Material Design Icons。这种方式是将每个图标定义为一个字符，在HTML中使用Unicode码即可显示该图标。
- 首先，在项目中安装字体图标库。例如，在命令行中运行npm install @fortawesome/fontawesome-free来安装Font Awesome。
- 其次，在组件中引入图标库。可以直接在<head>标签中引入字体图标库的CSS文件，或者使用类似于Webpack的模块打包工具来引入。
- 最后，在需要使用图标的地方，使用对应的HTML标签，并通过class名称来指定图标。
```
<template>
  <div>
    <i class="fas fa-user"></i>
  </div>
</template>

<style>
@import '~@fortawesome/fontawesome-free/css/all.css';
</style>
```
SVG图标：SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式。使用SVG图标的好处是可以实现更高层次的自定义，例如改变图标的颜色、大小等。
- 首先，找到适合的SVG图标，并将其保存到项目中的某个文件夹下。
- 其次，将SVG图标作为Vue组件进行引入和注册。
```
<template>
  <div>
    <icon-user></icon-user>
  </div>
</template>

<script>
import IconUser from '@/assets/icons/user.svg';

export default {
  components: {
    'icon-user': IconUser
  }
}
</script>
```
- 最后，在需要使用图标的地方直接使用自定义的Vue组件即可。

综上所述，Vue中保存的icon可以使用字体图标或者SVG图标，并根据具体需求选择合适的方式来使用。

1年前 0条评论