Nuxt3 中如何管理和使用 svg 图标

背景

Svg 矢量图由于可以任意放大缩小都不会失真,所以网页上的图标基本上都会选择使用 svg 格式。但是如果像使用图片那样去使用 svg 图标,会非常低效而且不方便控制样式。在 Nuxt3 中,有着其更优雅的解决方案

如何快速使用第三方 icon

Nuxt3 的 modules 中提供了一个模块组件nuxt-icon,这个组件支持通过 Iconify 使用到 200,000 个开源矢量图标。

安装 nuxt-icon

  1. 先安装依赖 nuxt-icon
npm install --save-dev nuxt-icon

# Using yarn
yarn add --dev nuxt-icon
  1. 在 nuxt.config.ts 文件中的注册模块
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-icon']
})
  1. 这就完成啦!

使用 nuxt-icon

使用 nuxt-icon 只需要在用到图标的地方使用 <Icon ``/``>组件, 比如

<Icon name="uil:github" color="black" />

这个组件支持如下属性

  • name (required):图标名称、表情符号或全局组件名称,您可以使用 icones.js.org 集合中的任何名称。
  • size:图标大小(默认:1em

如果您需要对图标进行全局配置,可以在nuxt.config.js文件中的icon选项下添加配置:

export default {
  icon: {
    size: '24px', // 默认图标大小
    color: '#000', // 默认图标颜色
    // 其他全局配置...
  },
  // 其他配置...
}

如何使用自定义的 svg 图标

很多时候,我们网页中使用的图标都是设计师绘制的,那么我们需要将图标的 svg 文件导入到项目目录中,然后通过 import 来使用。这时候,nuxt-icons 就派上用场了。

安装 nuxt-icons

  1. 同理, 先安装依赖 nuxt-icons
npm install --save-dev nuxt-icons

# Using yarn
yarn add --dev nuxt-icons
  1. 同样,在 nuxt.config.ts 文件中的注册该模块
export default defineNuxtConfig({
    modules: ['nuxt-icon','nuxt-icons']
})
  1. 完成,敬请食用吧!

使用 Nuxt-icons

要使用 nuxt-icons,你需要按照以下步骤进行操作:

  1. 在 assets 文件夹中创建一个名为”icons”的文件夹。
  2. 将带有。svg 扩展名的图标文件放入 icons 文件夹中。
  3. 在项目中使用<nuxt-icon name="">标签,其中 name 是你在 icons 文件夹中的 svg 图标的名称。
<nuxt-icon name="mySuperIcon"/>
  1. 如果你需要使用 svg 文件中的原始颜色(例如,如果你的图标包含 defs),你需要使用 filled 属性:
<nuxt-icon name="mySuperIcon" filled />
  1. 如果你不喜欢为图标分配的基本样式,你可以在你的 index.vue 文件中使用常规的 CSS 来更改这些样式。例如:
<style>.nuxt-icon svg{  margin-bottom: 0;}</style>

通过按照上述步骤,你就可以使用 nuxt-icons 来使用自己的 SVG 图标了。

原文链接:https://juejin.cn/post/7355329978022133810 作者:iwhitney

(0)
上一篇 2024年4月9日 上午10:39
下一篇 2024年4月9日 上午10:49

相关推荐

发表回复

登录后才能评论