svg的使用

svg的使用

更新：2024.11.26

这样还可以 控制颜色 和 大小

<i class="fa-solid fa-house"></i>


.fa-solid.fa-house{
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: white; /* 默认颜色 */
    mask: url('/static/icons/home-o.svg') no-repeat center;
    -webkit-mask: url('/static/icons/home-o.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

---

1. 简单的使用-单文件

vue+html

<template>
  <img src="@/assets/icons/general/home.svg" alt="Home Icon">
</template>

2. 简单的使用-多文件

vue

在 \src\assets\icons\ 目录下有多个svg文件 svg的文件用template包裹着的

例：Vue.vue 如下

<template>
	<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M42.666667 128h170.666666l298.666667 512 298.666667-512h170.666666L512 938.666667 42.666667 128z m369.792 0L512 298.666667l99.541333-170.666667h172.16L512 597.333333 240.298667 128h172.16z" p-id="4634"></path></svg>
</template>

例：Code.vue 如下

<template>
	<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M981.333333 512l-301.696 301.696-60.330666-60.330667L860.672 512l-241.365333-241.365333 60.330666-60.330667L981.333333 512zM163.328 512l241.365333 241.365333-60.330666 60.330667L42.666667 512l301.696-301.696 60.330666 60.330667L163.328 512z" p-id="4503"></path></svg>
</template>

同目录下 index.js，导出svg

export { default as Vue } from './Vue.vue'
export { default as Code } from './Code.vue'
export { default as Wechat } from './Wechat.vue'
export { default as BugFill } from './BugFill.vue'
export { default as BugLine } from './BugLine.vue'
export { default as FileWord } from './FileWord.vue'
export { default as FileExcel } from './FileExcel.vue'
export { default as FilePpt } from './FilePpt.vue'
export { default as Organization } from './Organization.vue'
export { default as Upload } from './Upload.vue'
export { default as Download } from './Download.vue'

使用：

import * as scIcons from './assets/icons'
......

scIcons['vue']
scIcons['code']

3. symbol

同一个文件中：<symbol> 定义图标，每个图标的 id 是其唯一标识符

使用 <use> 元素，通过 xlink:href 属性引用图标，在页面中引用图标

两个关键字都需要使用 <svg> 包裹

注意： svg的内容是 svg文件的复制，将开头的声明去掉

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg>
    <symbol id="icon-adv" viewBox="0 0 32 32">
        <svg t="1732207085719" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="980" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path d="M760.8832 77.7728H271.36a177.3056 177.3056 0 0 0-176.9984 177.1008v509.0816A177.2544 177.2544 0 0 0 271.36 941.0048h489.4208a177.2544 177.2544 0 0 0 177.1008-177.0496V254.8736a177.3056 177.3056 0 0 0-176.9984-177.1008z m-53.9136 61.44v146.6368a36.9152 36.9152 0 0 1-36.864 36.9152H362.24a36.9152 36.9152 0 0 1-36.864-36.9152V139.2128z m169.5744 624.64a115.7632 115.7632 0 0 1-115.6608 115.6096H271.36a115.7632 115.7632 0 0 1-115.6608-115.6096V254.8736a115.7632 115.7632 0 0 1 108.2368-115.3536v146.3296A98.4576 98.4576 0 0 0 362.24 384h307.8656a98.4576 98.4576 0 0 0 98.304-98.3552V139.52a115.7632 115.7632 0 0 1 108.1344 115.3536z"
                  fill="#333333" p-id="981"></path>
            <path d="M439.552 261.7344h153.2416a30.72 30.72 0 0 0 0-61.44H439.552a30.72 30.72 0 0 0 0 61.44z" fill="#333333" p-id="982"></path>
        </svg>
    </symbol>
    <symbol id="icon-home" viewBox="0 0 32 32">
        <!-- 第1个图标路径形状之类代码 -->
    </symbol>
    <symbol id="icon-setting" viewBox="0 0 32 32">
        <!-- 第2个图标路径形状之类代码 -->
    </symbol>

</svg>


<svg class="icon">
  <use xlink:href="#icon-user"></use>
</svg>

• 动态加载 SVG 文件（没有实践）

将 sprite.svg 放在静态资源目录： 把文件放到 public/icons/sprite.svg

<template>
  <svg class="icon" :class="customClass" aria-hidden="true">
    <use :xlink:href="spritePath"></use>
  </svg>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
    },
    customClass: {
      type: String,
      default: '',
    },
  },
  computed: {
    spritePath() {
      return `/icons/sprite.svg#${this.name}`;
    },
  },
};
</script>

<style>
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor; /* 继承字体颜色 */
}
</style>

3. svg-sprite-loader（未测试）

// 1. 安装 或者 yarn add vite-plugin-svg-icons --save-dev
npm install vite-plugin-svg-icons --save-dev

// 2. 配置 vite.config.js, 配置 svg-sprite-loader 
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export default {
  plugins: [
    createSvgIconsPlugin({
      // SVG 图标存放路径
      iconDirs: [path.resolve(process.cwd(), 'src/icons')], 
      symbolId: 'icon-[name]', // 自定义 symbolId 格式
    }),
  ],
};

// 3. 准备 SVG 图标
src/
  icons/
    home.svg
    user.svg
    settings.svg


// 4. 封装 SvgIcon 组件
// 创建一个通用的 SvgIcon 组件，用于方便复用。
<template>
  <svg class="svg-icon" :class="customClass" aria-hidden="true">
    <use :xlink:href="`#${name}`"></use>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      required: true, // 必须传入图标名称
    },
    customClass: {
      type: String,
      default: '', // 自定义类名
    },
  },
};
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor; /* 继承父元素颜色 */
}
</style>

// 5. 在主文件中引入 SVG 图标
// 在 main.js 中引入所有 SVG 文件，让它们被打包为 Sprite。
// 引入所有 SVG 文件 ？？？ import
const req = require.context('./icons', false, /\.svg$/);
req.keys().forEach(req);

// 6. 使用封装的 SvgIcon 组件
<template>
  <div>
    <SvgIcon name="home" customClass="icon-home" />
    <SvgIcon name="user" customClass="icon-user" />
    <SvgIcon name="settings" customClass="icon-settings" />
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon.vue';

export default {
  components: {
    SvgIcon,
  },
};

4. jQuery中的其他使用方法

使用 jQuery 动态加载 SVG 内容

<div id="svg-container"></div>

<script>
    $('#svg-container').load('path/to/your/file.svg');
</script>

使用 Ajax 加载 SVG 文件

<div id="svg-container"></div>

<script>
    $.get('path/to/your/file.svg', function(data) {
        $('#svg-container').html(data);
    });
</script>