如何打包 svg 地图 ? 那还不轻松拿捏 !

☆ 什么是 SVG ?

SVG(scalable vector graphics) --可缩放矢量图形 , 是一个基于文本的图形语言

SVG 的两种用法

1.直接使用img标签 , src直接指向svg路径使用

img 复制代码
// img标签的src属性放svg路径
<img src="../src/assets/qq.svg" alt="">

2.直接放svg

svg 复制代码
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_784_9534)">
            <path
                d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z"
                fill="white" />
            <path
                d="M32.9467 25.1267C38.72 27.0667 40 27.16 40 27.16V6.42C40.0018 5.57698 39.8371 4.74191 39.5155 3.96264C39.1939 3.18337 38.7217 2.47524 38.1259 1.87882C37.5301 1.28241 36.8225 0.809443 36.0435 0.487037C35.2646 0.164631 34.4297 -0.000875577 33.5867 3.4834e-06H6.41335C4.71235 0.00353161 3.08214 0.681268 1.87998 1.88468C0.677817 3.08809 0.00177475 4.71901 1.3883e-05 6.42V33.58C-0.00174104 34.423 0.162898 35.2581 0.484495 36.0374C0.806091 36.8166 1.27832 37.5248 1.87412 38.1212C2.46991 38.7176 3.17756 39.1906 3.95649 39.513C4.73542 39.8354 5.57033 40.0009 6.41335 40H33.5867C35.2877 39.9965 36.9179 39.3187 38.12 38.1153C39.3222 36.9119 39.9982 35.281 40 33.58V33.3333C40 33.3333 29.6133 29 24.36 26.4533C20.8333 30.7733 16.28 33.42 11.5733 33.42C3.57335 33.42 0.90668 26.4533 4.68001 21.84C5.83079 20.5463 7.37411 19.6658 9.07335 19.3333C12.4667 18.4933 17.8867 19.8533 22.9467 21.5267C23.8929 19.7756 24.6462 17.927 25.1933 16.0133H9.58001V14.4533H17.6267V11.6467H7.85335V10.0667H17.6267V6C17.6265 5.90899 17.645 5.8189 17.681 5.73529C17.7169 5.65169 17.7697 5.57633 17.8359 5.51387C17.9021 5.45141 17.9804 5.40317 18.0659 5.37213C18.1515 5.34108 18.2425 5.32787 18.3333 5.33334H22.2733V10.0667H31.92V11.6467H22.2733V14.4867H30.16C29.4626 17.4379 28.3397 20.272 26.8267 22.9C29.2 23.7733 31.3467 24.58 32.9467 25.1267ZM9.74668 21.74C8.3366 21.8696 6.98618 22.3711 5.83335 23.1933C2.75335 25.86 4.58668 30.7733 10.8 30.7733C14.42 30.7733 18.0133 28.4533 20.8667 24.7733C16.8667 22.7733 13.4267 21.3867 9.74668 21.74Z"
                fill="#00A7EF" />
        </g>
        <rect x="-953.5" y="-457.5" width="2535" height="1373" rx="39.5" stroke="#EF5533" />
        <defs>
            <clipPath id="clip0_784_9534">
                <path
                    d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z"
                    fill="white" />
            </clipPath>
        </defs>
    </svg>

SVG 标签修改大小

  • 必须提供svg viewbox属性 , 提供后再设置widthhight才能生效 ;
  • 常见用法: 设置width和hight的相对单位1em , 使用标签将svg进行包裹 , 再设置标签的字体大小 ;
修改大小 复制代码
// 1.svg 标签上提供 `viewbox`属性
// 2.svg 外层使用标签包裹 , 并设置字体大小
<div style="font-size: 100px;">
     <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
          <path d="..略" />
     </svg>
</div>

// 3.设置svg标签的宽高
<style>
    svg {
        width: 1em;
        height: 1em;
    }    
</style>

是不是感觉很简单 , 下面来尝试修改一下svg的颜色 ~

SVG 标签修改颜色

方法1. 直接使用fill属性修改颜色 --给svg标签上加fill的css属性

弊端 : 如果ui提前指定了固定的fill颜色 , 那么我们再使用fill修改颜色就不生效

fill 复制代码
// 通过css的fill属性将svg颜色设置为粉色
  svg {
        width: 1em;
        height: 1em;
        fill: pink 
      }
方法2. 给svg标签上设置 fill : currentColor , 这样我们可以直接在包裹svg的标签上设置color进行颜色的修改
currentColor 复制代码
// 1. style样式中添加fill : currentColor
<style>
  svg {
        width: 1em;
        height: 1em;
        fill: pink !important
      }
 </style>
 
// 2. 包裹svg的div标签上设置color颜色
 <div style="font-size: 100px;color: pink;">
    <svg>略</svg>
 </div>

介绍完svg简单用法 , 下面总结一下svg雪碧图的应用方法 ~

☆ SVG 精灵图

  1. 首先把所有的svg标签 都包裹在同一个svg标签里面 ;
  2. 把包在'总'svg里面的 svg标签 改成symbol标签(元件), 并提供id属性 ;
  3. 根据id找到对应的svg,直接使用图标组件来进行选择显示 :
雪碧图 复制代码
<svg aria-hidden="true">
     <use href="#指定的id"></use>
</svg>
只看文字有一点点抽象 , 让我们用代码来演绎一下吧 ~
雪碧图 复制代码
// 1. 准备一个svg标签将我们所有的svg标签全部包裹进去
 <svg>
// 2. 将我们包裹进去的所有svg标签替换为symbol标签 , 并加上id属性
    <symbol id="a" fill="pink" width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
        <path
            d="略" />
    </symbol>

    <symbol id="b" width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
        <path
            d="略" />
    </symbol>
    <symbol id="c" width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
        <path
            d="略 />
    </symbol>
</svg>

// 3. 根据id选择器将我们需要的svg进行选择
 <svg aria-hidden="true">
    <use href="#a"></use>
 </svg>

我们项目中的svg都要这样一个一个写入吗 ? 当然打咩!!

我们可以使用插件进行svg地图的打包 : 根据 icons文件夹中的svg图片打包到项目中 ,通过组件使用图标( 演示代码为Vue3 )

  • 安装依赖
安装依赖 复制代码
yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D
  • 使用插件 在vite.config.ts中进行引入
使用插件 复制代码
// 1. 引入
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' 
import path from 'path'
// 2. 使用插件  --plugins数组中加入对象
export default defineConfig({ 
    plugins: 
      [   
        createSvgIconsPlugin({ 
        // 指定图标文件夹,绝对路径(NODE代码) 
        iconDirs: [path.resolve(process.cwd(), 'src/icons')] 
      })]
    })
  • 导入到main.ts
导入 复制代码
import 'virtual:svg-icons-register'
  • 在页面中使用svg精灵地图
使用svg 复制代码
<svg aria-hidden="true">
    <!-- #icon-文件夹名称-图片名称 -->
    <use :href="`#icon-home-close`" />
</svg>
<svg aria-hidden="true">
    <use :href="`#icon-home-open`" />
</svg>

//可以设置一下svg标签的宽高 , 这样可以通过设置标签的字体大小来调整svg的大小了
<style scoped>
    svg {
      width: 1em;
      height: 1em;
    }
</style>

我们为了提高复用性可以将svg使用图标组件进行抽离封装 ~

小结:

  • icons文件打包的产物?
    会生成一个 svg 结构(js创建的)包含所有图标,理解为 精灵图
  • 怎么使用svg图标? 通过 svg 标签 #icon-文件夹名称-图片名称 指定图片,理解 精灵图定位坐标

使用步骤就是这样啦 , 欢迎指正和补充 ~

相关推荐
中微子40 分钟前
React 状态管理 源码深度解析
前端·react.js
加减法原则2 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele2 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4532 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友2 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir2 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴3 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子3 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
追逐时光者3 小时前
面试第一步,先准备一份简洁、优雅的简历模板!
后端·面试
DoraBigHead3 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构