<svg width="1em" height="1em" viewBo

时间: 2023-10-23 12:09:15 浏览: 236

【JavaScript源代码】Vue中引入svg图标的两种方式.docx

Vue中引入svg图标的两种方式　　Vue中引入svg图标的方式　　安装　　yarn add svg-sprite-loader --dev　　svg组件　　index.vue　　　　<template>　　 <svg class="svg-icon" :class="svgClass" aria-hidden="true">　　 <use :xlink:href="iconName" />　　 </svg>　　</template>　　　　<script>　　export default {　　 name: 'SvgIcon',　　 props: {　　在Vue.js应用中，引入SVG图标是常见的需求，因为SVG图标具有良好的可伸缩性和响应性。本篇文章将详细介绍在Vue中引入SVG图标的两种主要方法。 ### 方法一：使用`svg-sprite-loader` 我们需要通过npm或yarn安装`svg-sprite-loader`这个依赖。在终端中运行以下命令： ```bash yarn add svg-sprite-loader --dev ``` 或者 ```bash npm install svg-sprite-loader --save-dev ``` 然后，创建一个SVG组件，例如`index.vue`： ```html <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: 'SvgIcon', props: { // 接收SVG图标名称 svgName: { type: String, required: true } }, computed: { iconName () { return `#icon-${this.svgName}` }, svgClass () { if (this.svgName) { return 'svg-icon' + this.svgName } else { return 'svg-icon' } } } } </script> <style lang="less" scoped> .svg-icon { width: 100px; height: 100px; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> ``` 接下来，我们需要注册SVG组件到全局，以便在任何Vue组件中都能使用。在`index.js`中添加以下代码： ```javascript import Vue from 'vue' import SvgIcon from '@/components/SvgIcon' // 注册到全局 Vue.component('svg-icon', SvgIcon) // 读取SVG图标并自动导入 const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) requireAll(req) ``` 在`vue.config.js`中配置Webpack，以便处理SVG图标： ```javascript module.exports = { chainWebpack: config => { config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } } ``` 这里的`resolve`函数是用于获取相对路径的，需要在文件顶部定义： ```javascript const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } ``` 在需要使用SVG图标的Vue组件中，你可以这样引用： ```html <svg-icon svg-name="ic_home_news" /> ``` ### 方法二：使用`vue-svg-component-runtime` 另一种引入SVG图标的方法是使用`vue-svg-component-runtime`库。安装该库： ```bash npm install vue-svg-component-runtime --save ``` 然后，创建一个SVG组件模板，如`SvgIcon.vue`： ```html <template> <svg-component :name="iconName" :class="svgClass"></svg-component> </template> <script> import VueSvgComponentRuntime from 'vue-svg-component-runtime' export default { name: 'SvgIcon', props: { svgName: { type: String, required: true } }, components: { SvgComponent: VueSvgComponentRuntime }, computed: { svgClass () { if (this.svgName) { return 'svg-icon' + this.svgName } else { return 'svg-icon' } } } } </script> <style scoped> /* 这里可以添加通用的SVG样式 */ </style> ``` 接下来，将SVG图标文件夹中的每个SVG文件转换为Vue组件，可以使用`@vue/cli-service`提供的`vue-cli-service`命令： ```bash vue-cli-service build --target lib --name icons src/icons/*.svg ``` 这将在`dist`目录下生成一系列的SVG组件，然后在`main.js`或`index.js`中导入这些组件： ```javascript import * as icons from '@/icons' Object.keys(icons).forEach(name => { Vue.component(name, icons[name]) }) ``` 现在，你可以在Vue组件中使用这些SVG组件： ```html <SvgIcon svg-name="ic_home_news" /> ``` 这两种方法都可以有效地在Vue项目中引入SVG图标，并且可以根据项目需求和个人偏好选择合适的方法。使用SVG图标不仅可以提升网站的视觉效果，还能确保在不同屏幕尺寸和分辨率下的图标质量。

引用:示例代码是一段用SVG语言编写的代码，用于创建一个SVG图形。其中包括三个SVG元素，分别是矩形（rect）、圆形（circle）。这段代码的viewBox属性用于定义SVG画布的范围，指定了坐标系统的范围和位置。引用:viewBox详解：SVG画布只是用于展示SVG世界中某一个范围的内容，而对于超过了SVG画布范围的内容，则会被遮挡。viewBox属性用于指定SVG画布范围，可以通过设置不同的值来调整显示的内容。默认情况下，SVG画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。引用:创建svgIcon component的代码是一个Vue组件，用于创建一个可复用的SVG图标组件。该组件接受一个iconClass属性作为参数，根据该属性动态生成图标的名称。这个组件使用了SVG的<use>元素，用于引用外部的SVG文件并在页面上显示。问题:请告诉我，<svg width="1em" height="1em" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">的作用是什么？ <svg width="1em" height="1em" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">是一个SVG图形，它的作用是在页面上显示一个大小为1em的SVG图标。通过设置width和height属性为1em，可以根据父元素的字体大小自动调整图标的尺寸。viewBox属性用于定义SVG画布的范围，指定了坐标系统的范围和位置，这里的viewBox设置为"0 0 100 100"表示画布范围是一个100x100的正方形。同时，这个SVG元素还使用了xmlns属性指定了命名空间为"http://www.w3.org/2000/svg"，以确保浏览器正确解析SVG语法。

阅读全文

<svg width="1em" height="1em" viewBo

相关推荐

vue-svg-icon-loader:将SVG文件转换为VueJS组件

vue项目中使用Svg的方法

vue2使用<svg-icon/>组件

vue2中使用<svg-icon/>组件

.icon { width: 17px !important; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }

SVG多行文本

svg path 怎么暂停

svg rect 插入图片

SVG中插入HTML标签

svg数据坐标如何获取

vue3中使用svg

vue3 使用 svg矢量图

el-input加入svg图标

SVG 画正负数柱状图

微信小程序怎么加载svg 图标

svg-icon怎么使用在vue中

最新推荐

2023全球人工智能研究院观点报告：生成式人工智能对企业的影响和商业前景

构建基于Django和Stripe的SaaS应用教程

管理建模和仿真的文件

R语言数据处理与GoogleVIS集成：一步步教你绘图

如何使用Matlab实现PSO优化SVM进行多输出回归预测？请提供基本流程和关键步骤。

Symfony2框架打造的RESTful问答系统icare-server

"互动学习：行动中的多样性与论文攻读经历"

R语言与GoogleVIS包：打造数据可视化高级图表

在三级客户支持体系中，服务台工程师是如何处理日常问题并与其他层次协作以确保IT服务质量和连续性的？

蓝桥杯Python试题解析与答案题库