webpack5搭建svg环境

最新推荐文章于 2024-09-12 17:29:34 发布

一夏℃

最新推荐文章于 2024-09-12 17:29:34 发布

阅读量1k

点赞数

文章标签： js webpack

本文链接：https://blog.csdn.net/weixin_44411341/article/details/119010898

版权

本文介绍如何使用webpack5搭建SVG环境，包括SVG的使用场景、目录结构设置、初始化项目、安装依赖、配置svg-loader和相关plugin，以及运行和测试打包后的代码。

摘要由CSDN通过智能技术生成

webpack5搭建svg环境

svg是矢量图。使用svg画的图片，不会怎么放大，都不失真
1: svg可以通过img标签加载
2: svg可以作为字体图标
3: svg 可以用在大屏可视化上做各种标记点。
进阶:将svg 做成icon 组件，并使用webpack 搭建环境 …

目录结构

在这里插入图片描述

开发实例代码如下

在根目录创建src文件夹，并创建user.svg,index.js

// user.svg
<svg  verison="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
     stroke="#000">
  <circle cx="12" cy="12" r="10" fill="yellow"/>
</svg>

// index.js
import user from  './user.svg';
console.log('index.js is run');

const div = document.createElement("div");
div.style.width = '300px';
div.style.height = '300px';
div.style.border = '3px solid red';
div.style.background = `url(${
     user})`;
var body = document.querySelector("body");
body.appendChild(div