<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"> <line x1="18" y1="20" x2="18" y2="10"></line> <line x1="12" y1="20" x2="12" y2="4"></line> <line x1="6" y1="20" x2="6" y2="11"></line> </svg>

时间: 2023-07-21 17:50:08 浏览: 217

>Vue组件化，封装SVG图标支持uniapp等vue版本 # 前言 # 设计思路 **创建SVG组件：** 首先创建一

>Vue组件化，封装SVG图标。支持uniapp等vue版本。 # 前言 # 设计思路 **创建SVG组件：** 首先创建一个用于加载SVG文件的Vue组件。 **SVG文件组织：** 将SVG文件放在项目的某个目录下，例如components/svgIcon/。 **SVG组件注册：** 创建一个函数来动态导入SVG文件，并注册到Vue组件中。 **使用SVG组件：** 在项目中通过组件标签使用SVG图标。 ### Vue组件化，封装SVG图标支持uniapp等vue版本 #### 前言与设计思路在现代Web开发中，图标是非常重要的视觉元素之一。传统的图标使用方法包括使用图像文件（如PNG或JPEG）或者字体图标。然而，这些方法都有各自的局限性，比如图像文件在缩放时可能会出现失真，而字体图标则可能因为字体渲染差异导致显示效果不佳。SVG（Scalable Vector Graphics）图标因其可缩放性和自定义能力，逐渐成为一种更加理想的解决方案。特别是在使用Vue这样的前端框架进行开发时，利用SVG图标的组件化能够带来更好的灵活性和维护性。 #### 创建SVG组件创建SVG组件是实现SVG图标组件化的第一步。这通常涉及到以下步骤： 1. **SVG文件组织**：将SVG文件集中放置在一个特定的目录下，比如`components/svgIcon/`。这种组织方式有助于保持项目结构的整洁，方便管理和查找。 2. **SVG组件注册**：为了在Vue项目中使用这些SVG文件，需要编写一个函数来动态地导入这些SVG文件，并注册为Vue组件。这样做的好处在于，每个SVG文件都可以作为一个独立的Vue组件来使用，增加了代码的复用性和可维护性。 3. **使用SVG组件**：在实际应用中，可以通过简单的组件标签来使用这些SVG图标。这种方式使得开发者可以像使用任何其他Vue组件一样方便地使用SVG图标，同时还可以传递属性来改变图标的颜色、大小等。 #### 核心文件示例下面是一些具体的代码示例，帮助理解如何实现上述设计思路。 ##### 1.1 父组件 `svgIcon.vue` 父组件`svgIcon.vue`负责管理多个SVG图标组件。在这个例子中，我们有`checkIcon`和`checkOnIcon`两个图标组件作为示例。这个组件接受`iconName`、`color`和`size`作为props来控制哪个图标被展示以及图标的颜色和大小。 ```javascript <template> <checkIcon v-if="iconName === 'checkIcon'" :color="color" :size="size" /> <checkOnIcon v-if="iconName === 'checkOnIcon'" :color="color" :size="size" />  </template> <script> import checkIcon from '@/components/svgIcon/checkIcon.vue'; import checkOnIcon from '@/components/svgIcon/checkOnIcon.vue'; export default { name: 'svgIcon', props: { iconName: { type: String, }, color: { type: String, }, size: { type: [String, Number], } }, components: { checkIcon, checkOnIcon, // 其他图标组件 } }; </script> <style scoped> /* 可以在这里添加一些基础样式 */ </style> ``` ##### 1.2 子组件 `checkIcon.vue` `checkIcon.vue` 是一个具体的SVG图标组件，它展示了如何根据传入的颜色和大小来动态渲染SVG图标。 ```javascript <template> <svg :width="size" :height="size" :viewBox="viewBox(size)" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="0.5" y="0.5" :width="size - 1" :height="size - 1" rx="9" :stroke="color" /> <path d="M14.5617 6.84285L8.18486 13.2197C7.89161 13.5137 7.41553 13.5137 7.12227 13.2197L6.59033 12.6878L13.4979 5.78025C13.7911 5.48699 14.2672 5.48699 14.5604 5.78025C14.8556 6.07351 14.8556 6.54959 14.5617 6.84285Z" :fill="color" /> <path d="M7.12097 13.2197L4.46384 10.5626C4.17058 10.2693 4.17058 9.79324 4.46384 9.49998C4.75719 9.20671 5.23318 9.20671 5.52644 9.49998L8.71551 12.689L8.18484 13.2197C7.89031 13.5137 7.41551 13.5137 7.12097 13.2197Z" :fill="color" /> </svg> </template> <script> export default { name: 'checkIcon', props: { color: { type: String, default: '#D6002F' // 默认颜色 }, size: { type: [String, Number], default: 19 // 默认大小 } }, methods: { viewBox(val) { return `0 0 ${val} ${val}`; } } }; </script> <style scoped> /* 可以在这里添加一些基础样式 */ </style> ``` ##### 1.3 子组件 `checkOnIcon.vue` `checkOnIcon.vue` 的实现与`checkIcon.vue`类似，主要区别在于SVG路径的定义，代表了不同的图标形状。 ```javascript <template> <svg :width="size" :height="size" :viewBox="viewBox(size)" fill="none" xmlns="http://www.w3.org/2000/svg">  </svg> </template> <script> export default { name: 'checkOnIcon', props: { color: { type: String, default: '#D6002F' // 默认颜色 }, size: { type: [String, Number], default: 19 // 默认大小 } }, methods: { viewBox(val) { return `0 0 ${val} ${val}`; } } }; </script> <style scoped> /* 可以在这里添加一些基础样式 */ </style> ``` #### 总结通过上述步骤，我们可以轻松地在Vue项目中实现SVG图标的组件化封装。这种方式不仅提高了代码的可维护性，还增强了图标使用的灵活性。同时，这种方式也适用于uni-app等其他基于Vue的框架，使得SVG图标的使用变得更加通用和便捷。

这段代码定义了一个SVG图标，具体内容如下： ```html <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"> <line x1="18" y1="20" x2="18" y2="10"></line> <line x1="12" y1="20" x2="12" y2="4"></line> <line x1="6" y1="20" x2="6" y2="11"></line> </svg> ``` 其中，`xmlns`属性指定了SVG文件的命名空间。`width`和`height`属性指定了SVG图标的大小。`viewBox`属性定义了可见区域的大小和位置。`fill`属性指定了填充颜色，`stroke`属性指定了描边颜色，`stroke-width`属性指定了描边宽度，`stroke-linecap`和`stroke-linejoin`属性指定了描边的端点和拐角的形状。`class`属性指定了CSS样式类。在图标的主体部分，我们使用了`<line>`元素来画出三条直线，这些直线组合在一起形成一个柱状图的形状，它们的起点和终点坐标分别由`x1`、`y1`和`x2`、`y2`属性指定。

阅读全文

相关推荐

svg-spreact:使用svgson创建svg精灵并做出React

babel-plugin-inline-svg：Babel插件以优化和内嵌svg

这段代码什么意识，代码：<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="30.57700538635254 16.952991485595703 31.87599754333496 55.13100814819336" enable-background="new 0 0 90 90" xml:space="preserve">

<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"></svg> 这种格式的svg怎么生成

<svg t="1684865724344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2035" width="60" height="60">具體什麽意思

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg"> <circle cx="56" cy="216" r="17" id="testCircle" fill="purple"> <animate attributeName="fill" values="#6a11cb;#2575fc;#6a11cb;" dur="1s" repeatCount="indefinite"></animate> </circle> </svg>

<template> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" > </svg> </template>

给我讲讲 <template> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" > </svg> </template>

Welcome To AdrianR's Website! <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-down-right-square-fill" viewBox="0 0 16 16"> </svg>

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"></svg>

<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-89 46 72 72" enable-background="new -89 46 72 72" xml:space="preserve"> <g> </g> <g> </g> <g> </g> </svg> 镜像翻转它

<svg width="300" height="300"> <svg t="1686324790855" class="pen" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16265" width="48" height="48"> <animateMotion dur="5s" repeatCount="indefinite" path="M 50 150 Q 100 100 150 150 T 250 150" /> </svg> </svg>

<svg t="1686235846219" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns

最新推荐

纯Java动态生成SVG饼图与JFreeChart超强功能生成SVG图表

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

管理建模和仿真的文件

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

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

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

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

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

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

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