vue svg-icon 调整大小

要调整 Vue 中的 SVG 图标的大小，你可以使用 CSS 的方式来实现。下面是一个简单的示例：

首先，确保你已经导入了 SVG 图标并注册为 Vue 组件。假设你已经有一个名为 `SvgIcon` 的组件来渲染 SVG 图标。

在组件中，你可以通过设置 `width` 和 `height` 属性来调整 SVG 图标的大小。这两个属性可以使用 CSS 的单位进行设置，比如像素（px）或百分比（%）。

<template>
  <SvgIcon
    class="icon"
    width="24px"
    height="24px"
    :icon="iconName"
  />
</template>

<style>
.icon {
  /* 设置图标的宽度和高度 */
  width: 24px;
  height: 24px;
}
</style>

在上面的示例中，我们给 `SvgIcon` 组件添加了一个名为 `icon` 的 prop，用于指定要显示的图标名称。同时，在样式中设置了 `.icon` 类的宽度和高度为 24 像素。

你可以根据需要调整宽度和高度的数值，使其适应你的项目需求。

相关问题

vue-svg-icon

### 如何在 Vue 项目中使用 SVG 图标

#### 使用 `svg-sprite-loader` 加载 SVG 图标

为了更高效地管理和加载 SVG 图标，在 Vue 项目中可以采用 `svg-sprite-loader` 来创建一个 SVG sprite。这不仅减少了 HTTP 请求次数，还提高了性能。

安装依赖：

npm install svg-sprite-loader --save-dev

配置 Webpack (通常位于 `vue.config.js`) ：

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换它的 `svg-sprite-loader`
    svgRule.use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

#### 创建并注册全局组件

按照惯例，可以在项目的 `src/icons/` 下建立两个子目录：一个是用于存放 `.svg` 文件的 `/svg`；另一个则是用来定义和导出这些图标的索引文件 `index.js`[^1]。

编写 `SvgIcon.vue` 组件来动态渲染传入的名字对应的图标：

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

接着，在 `main.js` 中引入此组件作为全局组件以便于在整个应用里方便调用[^2]:

import SvgIcon from '@/components/SvgIcon'

Vue.component('svg-icon', SvgIcon)

const req = require.context('./icons/svg', false, /\.svg$/)
req.keys().forEach(req)

现在就可以像这样使用自定义的 `<svg-icon>` 标签了:

<svg-icon icon-class="example"/>

其中 `example` 是放置于 `src/icons/svg/example.svg` 的文件名去掉扩展后的名称。

vue3 使用 vue-svg-icon

### 如何在Vue 3项目中使用 `vue-svg-icon` 库

#### 安装依赖包
为了能够在 Vue 3 中顺利引入并使用 SVG 图标，首先需要安装必要的依赖项。这包括 `@svgr/webpack` 和 `babel-plugin-import` 插件来处理和优化 SVG 文件。

npm install @svgr/webpack babel-plugin-import --save-dev

#### 配置 Webpack 加载器
如果项目基于 Vite 或者其他现代构建工具，则不需要手动配置 webpack；但对于传统的 Vue CLI 构建体系而言，需修改 `vue.config.js` 来支持自动导入 `.svg?inline` 的方式：

module.exports = {
    chainWebpack: config => {
        const svgRule = config.module.rule('svg');

        svgRule.uses.clear();

        svgRule.use('babel-loader')
            .loader('babel-loader')
            .end()
            .use('@svgr/webpack')
            .loader('@svgr/webpack');
    }
};

#### 创建全局组件注册脚本
创建一个新的 JavaScript 文件用于集中管理所有要使用的 SVG 图标，并将其作为模块导出以便于后续引用。此文件通常位于项目的 `src/utils/svg-icons.js` 路径下[^1]。

import { createApp } from 'vue';
import SvgIcon from '@/components/SvgIcon';

const app = createApp();
app.component('SvgIcon', SvgIcon);

export default function loadIcons() {
    const req = require.context('@/assets/icons/svg/', false, /\.svg$/);
    const icons = {};
    
    req.keys().forEach(key => {
        const name = key.replace(/(\.\/|\.svg)/g, '');
        icons[name] = () => import(`@/assets/icons/svg/${name}.svg`);
    });

    return icons;
}

#### 注册图标至应用实例
编辑入口文件 `main.js` ，通过调用上述定义好的函数完成对所需图标的批量加载与挂载操作[^2]。

import { createApp } from 'vue';
import App from './App.vue';
import loadIcons from './utils/svg-icons';

createApp(App)
    .mixin({
        data() {
            return {
                icons: {}
            };
        },
        created() {
            this.icons = loadIcons();
        }
    })
    .mount('#app');

#### 使用自定义 `<svg-icon>` 组件
最后，在模板里可以直接利用已经声明过的 `<svg-icon>` 标签显示对应的图形资源了。只需指定相应的名称属性即可实现按需渲染特定的图标。

<template>
  <div class="icon-container">
      <!-- 假设有一个名为 home 的 svg -->
      <svg-icon :icon-class="'home'" />
  </div>
</template>

<script setup lang="ts">
// No additional script needed here.
</script>