Vue中svg-icon的使用（svg-sprite）

最新推荐文章于 2024-05-13 01:02:10 发布
最新推荐文章于 2024-05-13 01:02:10 发布
阅读量4.2k 收藏 19
点赞数 4
分类专栏： vue 文章标签： vue.js javascript icon
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Youthenen/article/details/122948738
版权

文章目录

sprite的概念

sprite的概念最早是图片上的sprite。
一个页面的请求资源中图片 img 占了大部分，所以为了优化有了image sprite 就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用 css 的 background-position 定位显示不同的 icon 图标。

如何使用iconfont字体图标？

下面展示的是使用unicode的方式。

<style>
        @font-face {
            font-family: 'good';
            src: url('./iconfont/iconfont.ttf?t=1644902967906') format('truetype');
        }
        .good {
            font-family: "good" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: red;
        }   
    </style>
</head>

<body>
    <span class="good">&#xe867;</span>
</body>

优点

兼容性最好，支持ie6+

缺点

unicode的书写不直观，语意不明确。光看&#xe867;这个unicode你完全不知道它代表的是什么意思。所以就引入了font-class，在demo_index.html中有介绍如何使用。

如何使用svg图标(svg-icon)？

使用方法

第一步

下载iconfont购物车下面生成的代码，在使用的页面引入 ./iconfont.js
<script type="text/javaScript" src="./iconfont/iconfont.js"></script>

第二步

加入通用css代码（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步

挑选相应图标并获取类名(在下载完的代码里面有个demo_index.html可以看到id)，应用于页面：
<use xlink:href="#icon-xxx"></use>

    <!-- 通过#icon-id就可以选取 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ditu" class="redColor"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ditu"></use>
    </svg>

使用成功！
在这里插入图片描述

使用svg-icon的好处

再也不用发送woff|eot|ttf| 这些很多个字体库请求了，所有的svg都可以内联在html内。

基于svg-icon图标创建icon-component 组件

//components/SvgIcon/index.vue
<template>
  <svg class="svg-icon" aria-hidden="true">
    <!-- iconName是外界传入的icon名通过计算属性加工之后得来的 -->
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script setup>
//  1. 在script setup中声明的变量（包括变量，函数声明，以及 import 引入的内容）
//  可以在模板中直接使用
//  2. 该脚本会被预处理并作为组件的 setup() 函数使用，也就是说它会在每个组件实例中执行
//  3. 无法指定当前组件的名字，会自动以文件名为主，省去了 name 属性
import { defineProps, computed } from 'vue'
//  defineProps 接收与 props 选项相同的值
const props = defineProps({
  icon: {
    type: String,
    required: true
  }
})
//  对外界传入的icon进行加工变成#icon-iconName
const iconName = computed(() => {
  return `#icon-${props.icon}`
})
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  /* 填充色 */
  fill: currentColor;
  overflow: hidden;
}
</style>

//引入svg组件
import SvgIcon from '@/components/SvgIcon'

//全局注册svg-icon
Vue.component('svg-icon', SvgIcon)

//在代码中使用
<svg-icon icon="password" />

改造icon-component 组件——生成svg-sprite

上面组件存在一个问题就是：就是现在所有的 svg-sprite都需要通过 iconfont 的 iconfont.js 生成，也就是说如果要加入一个图标，就必须重新下载一次iconfont.js文件，然后替换掉原先的，这会非常麻烦。
其次它做不到按需加载，不能根据我们使用了那些 svg 从而动态地生成 svg-sprite。

使用 svg-sprite

所以我们打算自己制作 svg-sprite 。
使用工具：svg-sprite-loader （它是一个 webpack loader ，可以将多个 svg 打包成 svg-sprite ）

//vue.config.js
chainWebpack(config) {
    // config 为 webpack 配置对象
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
    //  vue-cli默认情况下会使用 url-loader 对svg进行处理，会将它放在/img 目录下
    //  所以这个规则用于忽略这个文件夹，避免与雪碧图产生冲突
      // 规则的名字
      .rule('svg')
      // 忽略
      .exclude.add(resolve('src/icons'))
      // 结束
      .end()
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
      // 规则
      .rule('icons')
      // 正则，解析 .svg 格式文件
      .test(/\.svg$/)
      // 解析的文件
      .include.add(resolve('src/icons'))
      // 结束
      .end()
      // 新增了一个解析的loader
      .use('svg-sprite-loader')
      // 具体的loader
      .loader('svg-sprite-loader')
      // loader 的配置
      .options({
        symbolId: 'icon-[name]'
      })
      // 结束
      .end()
 }

这样子之后，就能按需引入图标

import '@/src/icons/xx.svg; //引入图标
<svg><use xlink:href="#xx" /></svg>  //使用图标

但是这又有一个问题，如果我要引入很多个图标，就需要import很多次，不够方便，所以下面引出自动导入。

自动导入所有svg-icon

创建一个专门放置图标 icon 的文件夹如：@/src/icons，将所有 icon 放在这个文件夹下的svg文件夹。 之后我们就要使用到 webpack 的 require.context。

//@/src/icons/index.js
import SvgIcon from '@/components/SvgIcon'
// 使用require.context api,它会遍历svg文件夹中的以.svg结尾的文件,然后自动导入，
// false表示不遍历子目录
const svgRequired = require.context('./svg', false, /\.svg$/)
// require.context返回的是一个函数,keys是这个函数的一个属性
// keys {Function} -返回匹配成功模块的名字组成的数组
svgRequired.keys().forEach((item) => svgRequired(item))
export default (app) => {
  app.component('svg-icon', SvgIcon)
}

在main.js中全局注册组件

//main.js
import SvgIcon from '@/icons'
const app = createApp(App)
SvgIcon(app)

之后我们增删改图标直接在@/src/icons/svg修改就好了下，就会自动生成 svg symbol了。在页面中就可以自动使用了。

参考学习

学习资料

-Yii
关注
  • 4
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用svg-sprite-loader处理svg图片
hello，是翠花呀
07-20 8894
网上已经有很多文章写了相似的例子，不过自己实践之后还是把过程记录下来，这样知识就是自己的了。 版本：@vue/cli 4.4.1 实现内容：1.vue载入svg 2.能够更改svg样式 3.svg无限旋转 1.使用的loader：svg-sprite-loader、svgo-loader 我们在vue.config.js文件里找到chainWebpack属性，添加如下代码： chainWebpack: config => { // ...... config.module
Vue中如何使用svg-icon
m0_65777910的博客
03-22 376
Vue中如何使用svg-icon
了解SVG-icon的使用流程
热门推荐
xzd2333的博客
05-04 1万+
SVG（Scalable Vector Graphics）可缩放矢量图形，是一种用于描述基于二维的矢量图形的 XML 标记语言，其基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等，还能显示文字对象和嵌入式外部图像（包括 PNG、JPEG、SVG 等）。
2024年前端最全小白详解Vue3项目中怎么引入 SVG 图标_vue3 svg，2024年最新作为一名web前端面试者你应该知道的知识
最新发布
2401_84617731的博客
05-13 988
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
Xlink的使用
12-30 4474
<?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 width="100%" height="100%" version="1.1"     xmlns="http
vue中使用svg icon
m0_65894854的博客
03-05 1347
svg icon
vue封装svg
kjl536566的博客
11-16 460
【代码】vue封装svg。
VUE-cli3使用 svg-sprite-loader
10-17
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，这篇文章主要介绍了VUE-cli3使用 svg-sprite-loader,需要的朋友可以参考下
如何使用vite-svg-loader
02-23
在现代 Web 开发中，使用 SVG 图像已经成为一个非常常见的需求，特别是在 Vue 应用程序中。然而，引入 SVG 图像经常会遇到一些问题，例如图像大小问题、浏览器兼容性问题等。为了解决这些问题，Vite-SVG-Loader 插件...
laravel-mix-svg-sprite:用于Laravel Mix的SVG Sprite组件
05-01
laravel-mix-svg-sprite 用于Laravel Mix的SVG精灵组件，包装了和。 安装 使用npm安装： $ npm install --save-dev laravel-mix-svg-sprite ... svgSprite ( 'src/icons' , // The directory contain
vue-svg-inline-loader：Webpack加载器，用于用Vue项目中的SVG文件的实际内容内联替换SVG图像
02-06
vue-svg-inline-loader 加载器，用于在项目中用SVG文件的实际内容内联替换SVG图像。 加载程序仅解析HTML模板格式。 Loader具有用于SVG优化的内置支持。 Sprite选项仅适用于方法。 Vue CLI 通过创建的项目不是...
一篇文章带你了解SVG ＜use＞ 元素
weixin_44215068的博客
06-15 9056
目录一、简单案例分析二、在defs元素外使用形状三、设置CSS样式四、总结SVG 元素可以重用SVG文档中其他位置（包括 元素和 元素）的SVG形状。可以在 元素内部（使形状直到使用之前不可见）或外部定义重用形状。示例 这个实例显示了在元素中定义的元素。这使得不可见，除非被元素引用。在引用元素之前，必须通过其ID属性对其设置ID。元素通过其xlink:href属性。注意属性值中ID前面的#。元素通过其...
svg-icon的使用（将svg转换为icon来使用）
zhangxiaodui的博客
10-27 2755
svg转换为icon的方式来使用
vue项目中使用svgIcon(svg-sprite-loader安装、配置及使用)
DW14687的博客
05-18 7169
目录 前言 一、安装svg-sprite-loader 二、封装组件 1.在components路径下新建svg/svgIcon.vue 2.在src目录下新建icons文件夹，包括一下文件 三、配置svg-sprite-loader 四、使用svg-icon组件 五、配置被选中时的颜色 1.检查svg源文件 2.配置选中后得颜色 总结 前言 网页中经常会遇到一些自定义得小图标，为了保证图标不失真，我们经常使用svgIcon实现。接下来一起看看如何安装和配置把~ ...
JS动态生成SVG对象动态设置use和属性
小问's blog
11-30 2286
需求： JS动态生成SVG对象，然后动态生成use子元素并设置xlink:href属性；然后appendChild到页面DOM； 这是我在使用svg制作icon图标的时候遇到的问题，就是symbol 然后svg use引用，方便制作icon； 通用方法： 直接外围一个div, 然后 div.innerHTML = '<svg class="icon"><use xlink:href="#'+name+'"></use></svg>' 这样是可以的
svg-icon
A5120184120的博客
09-03 115
用于存放.svg文件。
vue3+vite项目中封装并使用svg图标
~~~
05-09 3126
vue3+vite项目中封装并使用svg图标。项目中有很多地方需要用到svg图标，Element Plus 组件库提供了一套常用的图标，但是往往不能满足需求，而网上比较全的就是阿里图标库，本文就来介绍下如何将阿里图标库中的svg引入到自己的项目中。本文的项目使用vue3+vite来构建，可以使用第三方的vite-plugin-svg-icons插件，来引入svg图标。
vue导入图标的3种方式【阿里图标】
weixin_41027083的博客
03-22 1万+
第一种方式 Font class- css 点击【 Font class 】- 【 下载至本地 】，解压之后导入到项目【/src/assets/icon】，这个是【iconfont.css】文件。 @font-face { font-family: "iconfont"; /* Project id 3262995 */ src: url('iconfont.woff2?t=1647910536684') format('woff2'), url('iconfont.woff?t=1
vue项目中应用svg图标
u010426490的专栏
11-29 760
1、 新建一个vue项目 2、安装 svg-sprite-loader ,并配置 3、在components下新建SvgIcon组件，index.vue内容如下： <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href=...
vue3 svg-icon
09-18
在Vue3中使用svg-icon组件需要进行以下步骤： 1. 首先，在`main.js`文件中导入标和图标组件： ```javascript import '@/assets/icons' // 导入图标资源 import SvgIcon from '@/components/SvgIcon.vue'// svg component const app = createApp(App) app.component('svg-icon', SvgIcon) app.mount('#app') ``` 2. 其次，安装`svg-sprite-loader`依赖： ``` npm i svg-sprite-loader@6.0.11 ``` 并下载所需的图标，将其导入项目。在`assets`目录下创建`icons`目录，在`icons`目录下创建`svg`目录，将下载的图标文件保存在其中。 3. 其次，在`vue.config.js`文件中进行配置： ```javascript const { defineConfig } = require('@vue/cli-service') const path = require('path') const resolve = (dir) => path.join(__dirname, dir) module.exports = defineConfig({ // ...其他配置 chainWebpack (config) { // 设置 svg-sprite-loader 配置 config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) // 排除 svg 目录 .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) // 只包含 svg 目录 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } }) ``` 4. 最后，封装使用`svg-icon`组件，在需要使用图标的地方直接使用： ```html <svg-icon name="user" color="red" size="48"></svg-icon> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值