带有<use>和xlink的SVG Sprite:href - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

52·旺财记账-导航栏

的路径，不过这不是我们想要的，我们需要的是一个svg use的使用方法，此时我们需要svg sprite loader ---- 安装svg sprite loader MacBook-pro:morney...svg> use xlink:href="#label"/> svg> 记账 </router-link...封装icon组件 ---- 首封Icon 新建一个components/Icon.vue，提取重复内容 svg> use xlink:href="#label...-- use v-bind:xlink:href="'#'+name"/--> svg> const importAll...class="icon"> use :xlink:href="'#'+name"/> svg> const

1.7K2 0

SVG 图标在React项目中的优化

通过使用use> 元素的 xlink:href=”#id” 来引用单个图标。...也就是说合成后的大 SVG 会是这样： svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink...svg> 在需要引入单个图标的时候： use xlink:href="#symbolId">use> 这里我们使用 svg-sprite-loader 来自动生成 svg 雪碧图。.../, use: [{ loader: 'svg-sprite-loader', }], } react 组件中引入： import "....('svg-sprite').innerHTML = data; }); 这样的方式是我们自己手动去请求的，思考下能否使用 webpack 配置或者一些插件就能达到 svg 与 js 资源分离的目的呢。

4.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

Web图标的工程化方案

将xlink:href设置为定义的symbol id即可。...> 复制代码 svg> use xlink:href="#icon-arrow-up"/> svg> svg> use xlink:href="#icon-bell"/> svg...svg> use xlink:href="/assets/svg-symbols.svg#icon-arrow-up"/> svg> 复制代码工程化方式手动中合成引入那一坨 symbol...svg-sprite-loader 针对所引用的svg文件，svg-sprite-loader会把你的icon塞到一个个symbol中，最终在你的body中嵌入合并后的symbol。..."> use :xlink:href="iconName" /> svg> export default { name: 'SvgIcon

1.4K1 0

Vue | 使用 SVG sprite loader 来引入 svg

$/) // .include.add(dir).end() // .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod... svg> use xlink:href="#Money" /> svg>...// 牛逼，好用将 icon 封装成组件 @/components/Icon.vue svg class="icon"> use :xlink...bug: fill 颜色尝试实现切换标签页的时候自动更改填充颜色来达到突出显示的效果但是并不是所有的 svg 都会自动变色, 只有一些标签会起作用… 于是我直接干脆调成了这样和这样笑死我了...我们可以使用一个叫做 svgo-loader 的插件来解决此问题不知道是什么原因，高版本的这个插件会导致加载不出 svg 的 bug，我使用的是以下版本，是正常使用的 // 和上文提到的一样 {

4K2 0

该如何以正确的姿势插入SVG Sprites？

特别是 SVG它还下面还有很多小弟哦～，……有点扯远了；这项技术基于两个元素的使用：和 use>。...> 1、使用方式一 svg class="svg-icon"> use xmlns:xlink="http://www.w3.org/1999/xlink" xlink...:href="#svg-github" /> svg> 2、使用方式二，外链式引入 svg class="svg-icon2"> use xmlns:xlink...="display:none",你可以把它理解为是css sprite里的图片base64转化后的文件，先声明了变量存放起来了，，而方法二里的xlink:href="....，还是在用户体验、性能、大小、项目迭代代码维护上都比Css Sprites方便，更高效便捷; svg sprites优缺点： SvgSprites使用xlink:href #id的方式获取，便于维护和扩展

9444 0

如何在VUE项目中引入SVG图标

xlink:href="iconName" /> svg> export default { name: 'SvgIcon', props: {... svg :class="svgClass" aria-hidden="true" v-on="$listeners"> use :xlink:href="iconName...在计算属性iconName中，吾等将 iconClass 添以 #icon- 前缀，然后赋值于 SVG 的 use 元素的 xlink:href 属性。...在 SVG 中，use 元素用以赋值及渲染其他元素，而 xlink:href 属性则定义了所赋值之元素。...$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader

2.3K1 0

如何在Vue项目中更优雅地使用svg

，只需要写这么一段代码即可： svg> use :xlink:href="#icon1">use> svg> 但是这里有两个问题：从图标库（比如阿里的 iconfont）下载下来的通常是...这里的关键是使用 svg-sprite-loader 这个插件。.../icons')) .end() .use('svg-sprite-loader') .loader("svg-sprite-loader") .options({symbolId..."> use :xlink:href="iconNameCp" /> svg> export default { name: 'svgIcon...iconName 和 iconColor 确定图标的类型和颜色。

13.9K2 1

该如何正确的使用SVG sprites？

：和use> 从ps或者Illustrator创建并导出SVG图标，源码大概是这样的：重点来了，那么我们用symbols包装后是这个样子的：那么问题来了，我们直接在页面上引用吗...因为要显示图标，我们还需要使用use>元素，通俗的讲就是你定义了一组图形对象（使用元素）之后，可以使用use>元素来对它进行无限次实例化展示。...你使用xlink:href属性来指定你想要展示哪一组图标（相当于css图片精灵中的background-position），这里，我们要展示的是id为#svg-github的， ...大家可能还发现了style="display:none",你可以把它理解为是css sprite里的图片base64转化后的文件，而**方法二**里的xlink:href="..../icon.svg#svg-github"，可以理解为是css sprite里我们background-image 引入图片一样，而 #svg-github 就是background-position里的坐标

3K2 0

Vue项目中优雅使用icon

class="icon" aria-hidden="true"> use xlink:href="#icon-xxx">use> svg> 以上三种使用姿势的优缺点相信大家都了解了...xlink:href="#icon-qq">use> svg> 你以为这就完了？...svg图标时，不用再引入一遍图标svg了，因为我们做了自动化，icons/svg/下的svg后缀图标文件都可被自动引入 svg> use xlink:href="#icon-qq">use>...svg> svg> use xlink:href="#icon-wx">use> svg> ......svg-icon组件代码如下： svg :class="svgClass" aria-hidden="true" v-on="$listeners"> use :xlink

2.8K2 0

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片，到后来的使用css sprite来减少服务器请求，再到流行的图形字体化图标Iconfont。现在，一种全新的图标使用方式开始流行了起来——SVG symbols图标。...工作原理 SVG symbols的工作原理：symbol元素用来定义一个图形模板对象，它可以用一个use元素实例化。...只有symbol元素的实例（亦即，一个引用了symbol的use元素）才能呈现： svg> 这段代码使用SVG symbols定义了两个图标，每个symbol元素定义一个图标，图标id分别是heart和arrow，将其放在html文件的body元素内。...通过以下代码引用id为heart的图标： svg> use xlink:href="#heart"/> svg> xlink:href属性值就是‘#’加symbol的id名称，那么只需改变这个属性值就可以引用不同的图标

8682 0

搞个一手环境-处理svg组件（2）

原理 svg-sprite-loader 可以多个svg图标合并. 使用时只需根据合并的symbol的id即可....使用安装 svg-sprite-loader npm install svg-sprite-loader -D webpack链时配置 config.module .rule....end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options...-- 接受外链形式的图片svg-icon icon-class="https://xxxx.svg" /> --> use :xlink:href="iconName" /> svg> import { isExternal } from "utils

4424 0

Vue3 使用 svg-sprite-loader 实现 svg 图标按需加载

前面文章有讲到 svg 图标按需加载的优势以及 Vue 如何使用 vue-svg-icon 实现 svg 图标按需载入今天来学习一下使用 svg-sprite-loader 在 Vue3 项目中实现图标按需加载...> 这里将 svg 图标中对应的图标颜色值改为字符串 currentColor，方便使用时控制图标实时颜色将图标放在特定文件夹下，这里以 @/assets/svg 中导入的 svg 为例 2、安装...svgRule.uses.clear(); svgRule .use("svg-sprite-loader") .loader("svg-sprite-loader")...color: props.color }" @mousedown="clickIcon" > use :xlink:href="`#icon-${props.name.../plugin"; createApp(App) .use(plugin, { imports: [] }) 7、图标组件的使用 <SvgIcon name="email" :size

8.1K3 1

VUE项目iconfont自定义SVG（非SVG文件）-_PUSDN

简述 VUE项目iconfont自定义SVG,在线或者离线下载的阿里巴巴icon font.js；并非SVG文件；前情提示 VUE2；在线或者离线下载的阿里巴巴icon font.js；并非SVG...部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤ 带有#号、删除线、不操作、不执行字样的为提示或者备份bash，实际不执行创建iconfont项目并配置...+ 'px', color: color }" aria-hidden="true"> use :xlink:href="iconName" /> svg> ...="scss" scoped> .aaa { pointer-events: none; } 全局引入组件（可选） // main.js全局引入iconfont.js和自定义的...文件，需要，此处不做SVG介绍 npm install --save-dev svg-sprite-loader 或者 yarn add svg-sprite-loader -D 或者查看ant design

6623 0

解锁SVG新姿势：ChatGPT绘制图标+SVG Symbol自动导入

> 以下是一个使用SVG Symbol的示例代码： svg> use xlink:href="#icon-search">use> use xlink:href="#icon-heart...">use> svg> 在上面的代码中，我们通过use>元素引用了SVG文件中的两个Symbol元素，并将它们放在了svg>元素内。...4.2 自动化导入为了进一步简化该流程，我们可以使用Webpack和svg-sprite-loader自动导入SVG Symbol。...import "@/images/svg/rough.svg"; 5 总结本文主要介绍了两个方法，分别是使用ChatGPT自动生成SVG代码和使用Webpack和svg-sprite-loader自动导入...综上所述，通过使用ChatGPT自动生成SVG代码和使用Webpack和svg-sprite-loader自动导入SVG Symbol，我们可以更加便捷地在代码中使用SVG图标，提高开发效率和代码质量。

4.8K1 0

Vue 项目引入 SVG 图标

SVG 在既能满足现有图片的功能的前提下，又是矢量图，在可访问性上面也非常不错，并且有利于 SEO 和无障碍，在性能和维护性方面也比 icon font 要出色许多。...icon font 可读性不够好，icon font 主要在页面用 Unicode 符号调用对应的图标，对浏览器和搜索引擎不友好安装依赖在 vue 项目中引入 svg，首要工作是安装依赖包 svgo...和 svg-sprite-loader，这两个工具包都是给 webpack 打包 svg 图标资源使用。...loader .test(/\.svg$/) .use('svg-sprite-loader') .loader('svg-sprite-loader')...use :xlink:href="iconName" /> svg> export default { name: 'SvgIcon

2.5K2 0

高清ICON SVG解决方案（下） - 腾讯ISUX

首先来简单的普及一下SVG ICON的几个使用方法：第一种Inline SVG 这种方法就是直接把SVG标签写入到HTML中去，直接通过修改fill和stroke属性来控制填充颜色和边框颜色，但是缺点就是维护性不好...> 将上面代码保存为SVG文件后，在HTML我们通过下面的方式可以直接调用： 1 2 3 4 5 6 svg class="icon1"> use xlink:href="/svg/symbol.svg...#icon1">use> svg> svg class="icon2"> use xlink:href="/svg/symbol.svg#icon2">use> svg>...第五步，对icomoon生成的样式sprite.css进行微调整让其适配所有PC浏览器和Retina下的浏览器： ? 最后的效果： ?...上一篇文章之所以在火狐图标出问题那块讲了许久，并抛出更严谨的图标制作方法的主要原因这个方案需要对合并后的SVG Sprites转成PNG Sprite图片，如果SVG ICON做的有问题，那生成的图片也然出现发虚的情况

1.5K1 0

在 kbone 中实现小程序 svg 渲染

>）的大 SVG、在页面上用 use xlink:href="#symbol-id"> 的方式，实现 SVG 的 Sprite 化。...> svg xmlns='http://www.w3.org/2000/svg' width="40" height="40"> use xlink:href="#bell.../> use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /> use xlink:href="#myDot...= (use.getAttribute('xlink:href') || use.getAttribute('data-xlink-href')).replace(/^#/, ''); /...\2)/g, '$1'); // 将被设置到 data-xlink-href 的属性还原出来 svg = svg.replace(/xlink-href=/g, 'xlink:href=')

3K0 0

我和我亲爱的祖国（用CSS来为祖国母亲庆生）

如果你们知道什么是雪碧图(CSS Sprite) ，这个应该就好理解了，在 HTTP1 的时代里，雪碧图(CSS Sprite) 是一个很常见的技术概念，由于译名的原因，也有人叫它CSS精灵，是一种...> svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height...xlink:href="#s" transform="translate(5,5) scale(3)"/> use xlink:href="#s" transform="translate(...10,2) rotate(23.036243)"/> use xlink:href="#s" transform="translate(12,4) rotate(45.869898)"/>...use xlink:href="#s" transform="translate(12,7) rotate(69.945396)"/> use xlink:href="#s" transform

8173 0

【开源游戏网络游戏】勇士的战争！

js-inline-svg" data-use="#svg-icon-rotate-device-01">Please rotate your device.... svg js-inline-svg" data-use="#svg-icon-rotate-device...js-inline-svg js-soundBtn js-track-click js-sfx-ui-click" data-use="#svg-btn-sound-01" data-sound="1...:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="0" height="0" viewBox="0 0 0 0" enable-background...script type="text/javascript"> window.base_url = 'http://www.zzfriend.com'; svg-sprite-def

1.9K1 0

前端项目搭建实战（Vue）

:xlink:href="iconName" /> svg>export default { name: 'SvgIcon', props: { /...svg 图标了，我们还需要做的就是将 svg 文件加载到内存中， svg-sprite-loader 的官方解释是：一个用于创建 svg 雪碧图的 Webpack 加载器。...这个加载器现在已经被 JetBrains 公司收录和维护了。...通俗的讲：svg-sprite-loader 会把你引入的 svg 塞到一个个 symbol 中，合成一个大的 svg，最后将这个大的 svg 放入 body 中。...) // add完上下文进入数组，使用end回退 .use('svg-sprite-loader') // 添加loader .loader('svg-sprite-loader') //

2.1K7 3

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭