SVG Loader 使用教程

SVG Loader 使用教程

svg-loader Plug 'n Play external SVG loader 项目地址: https://gitcode.com/gh_mirrors/sv/svg-loader

1. 项目介绍

SVG Loader 是一个轻量级的 JavaScript 库，它可以通过 XHR 请求从外部源加载 SVG 图像，并将其直接注入到 HTML 的 <svg> 标签中。这使得你可以像使用内联 SVG 一样使用存储在 CDN 或其他域上的 SVG 文件。SVG Loader 支持所有主流框架，性能影响极小，且无需额外代码即可使用。

2. 项目快速启动

首先，你需要在项目中引入 SVG Loader。可以通过以下方式完成：

<!-- 在 HTML 文件中引入 SVG Loader -->
<script type="text/javascript" src="svg-loader.min.js" async></script>

接下来，你可以开始使用 SVG Loader 加载外部 SVG：

<!-- 使用 data-src 属性指定外部 SVG 的 URL -->
<svg data-src="https://example.com/path/to/your/svg.svg" width="50" height="50" fill="red"></svg>

确保外部 SVG 文件支持 CORS，或者 SVG 文件托管在你的域上，否则浏览器会因为安全限制阻止加载。

3. 应用案例和最佳实践

使用 CDN 加载 SVG 图标

<!-- 从 CDN 加载 SVG 图标 -->
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/star.svg" width="50" height="50" fill="red"></svg>

在 React 中使用 SVG Loader

import React from 'react';
import ReactDOM from 'react-dom';
import 'svg-loader.min.js';

class App extends React.Component {
  render() {
    return (
      <svg data-src="https://s2.svgbox.net/materialui.svg?ic=mail" fill="currentColor" width="50px" height="50px" style={{ color: 'red' }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

配置 SVG Loader

• 禁用/修改缓存

<!-- 禁用缓存 -->
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/heart.svg" data-cache="disabled" width="50" height="50"></svg>

<!-- 缓存一周 -->
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/heart.svg" data-cache="604800" width="50" height="50"></svg>

• 启用 JavaScript 执行

<!-- 启用 SVG 中的 JavaScript -->
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/heart.svg" data-js="enabled" onclick="alert('clicked')" width="50" height="50" fill="red"></svg>

• 禁用唯一 ID 和样式作用域

<!-- 禁用唯一 ID -->
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/heart.svg" data-unique-ids="disabled" width="50" height="50" fill="red"></svg>

<!-- 禁用 CSS 作用域 -->
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/heart.svg" data-css-scoping="disabled" width="50" height="50" fill="red"></svg>

懒加载 SVG 图标

<!-- 懒加载 SVG 图标 -->
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/heart.svg" data-loading="lazy" width="50" height="50"></svg>

处理加载事件

<!-- 使用 inline 函数处理加载事件 -->
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/cog.svg" oniconload="console.log('Icon loaded', this)"></svg>

<!-- 使用 addEventListener 处理加载事件 -->
<svg data-src="https://unpkg.com/@mdi/svg@5.9.55/svg/cog.svg"></svg>
<script>
  window.addEventListener('iconload', (e) => {
    if (e.target.id === 'iconload') {
      console.log('Icon loaded', e.target);
    }
  });
</script>

4. 典型生态项目

SVG Loader 可以与各种前端框架和库配合使用，例如 React、Vue.js 等。你可以通过 npm 安装 SVG Loader 并在你的项目中引用它。

npm install external-svg-loader

然后在你的组件中引入并使用它：

import externalSvgLoader from 'external-svg-loader';
// 使用 externalSvgLoader 加载 SVG

以上就是 SVG Loader 的基本使用教程，你可以根据自己的项目需求进行相应的配置和优化。

svg-loader Plug 'n Play external SVG loader 项目地址: https://gitcode.com/gh_mirrors/sv/svg-loader