inline svg的使用

最新推荐文章于 2023-03-06 08:00:57 发布
VIP文章 最新推荐文章于 2023-03-06 08:00:57 发布
阅读量2.8k 收藏 5
点赞数 2
分类专栏： JavaScript 文章标签： svg iconfont svg sprites vue react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010730126/article/details/103029314
版权

inline svg是目前前端图标解决方案的最优解（当然不仅限于图标），而且使用方式也及其简单，只要将svg图标代码当成普通的html元素来使用即可，如：

<!-- 绘制右箭头 -->
<svg viewBox="0 0 1024 1024" height="1em" width="1em" fill="currentColor">
  <path d="M665.6 512L419.84 768l-61.44-64 184.32-192L358.4 320l61.44-64 184.32 192 61.44 64z" />
</svg>

<!-- 绘制边框 -->
<svg viewBox="0 0 20 2" preserveAspectRatio="none" width="100%" height="2px">
  <path d="M0 1L20 1" stroke="rgba(0, 0, 0, .5)" stoke-width
最低0.47元/天 解锁文章
刘文壮
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ng-inline-svg：[非活动] Angular指令，用于在元素中内联插入SVG文件
01-31
ng-inline-svg 以前称为 用于在元素内插入SVG内联的Angular指令，允许轻松使用CSS进行样式设置，例如fill: currentColor; 。 这是基于，除了这纯粹是为了在元素内插入SVG文件，而没有诸如字体图标之类的多余东西。 安装 npm install --save ng-inline-svg 用法 将HttpClientModule和InlineSVGModule添加到模块导入列表中： import { HttpClientModule } from '@angular/common/http' ; import { InlineSVGModule } from 'ng-inline-svg' ; @ NgModule ( { declarations : [ AppComponent ] , imports : [ BrowserModule , HttpClientModule , InlineSVGModule . forRoot ( ) ] , bootstrap : [ AppComponent ] } ) class AppM
svg-inline:适用于Yii的嵌入式SVG图像
03-06
适用于Yii的嵌入式SVG图像 排队/ ˈɪnlʌɪn / 形容词 作为主要文字的一部分包含在页面上，而不是单独的部分中 该扩展为应用程序提供了简单的功能，联添加SVG图像。 安装 该软件包可以通过composer安装： composer require yiirocks/svg-inline 它可以通过和/或进行扩展： composer require yiirocks/svg-inline-bootstrap composer require yiirocks/svg-inline-fontawesome 用法 默认配置将在任何视图中启用$svg 。 echo $ svg -> file ( '@assets/image.svg' ); 可用选项可在找到。 单元测试 该软件包已通过测试。 要运行测试： ./vendor/bin/phpunit
svg-inline-loader：具有清理功能的嵌入式SVG加载器
02-20
！ 不再维护！ 该模块已弃用，将不再维护。 在大多数情况下，您可以改为使用和来替换功能： webpack.config.js const ImageMinimizerPlugin = require ( 'image-minimizer-webpack-plugin' ) ; module . exports = { module : { rules : [ { test : / \. svg $ / , use : [ { loader : "raw-loader" } ] } , ] , } , plugins : [ new ImageMinimizerPlugin ( { minimizerO
sass-inline-svg-image:SASS 内联 SVG 图像 + 可选更改背景填充
07-12
内联 svg 图像 将 svg 图像的内容直接嵌入到样式表中。 对于小图像，这可能是以生成更大的 CSS 文件为代价的性能优势。 PLUS：更改 svg 颜色填充 inline-svg-image($svg, [$color=nil, base64=true]) 用法和示例 要运行示例，请执行以下操作： git clone https://github.com/lagden/sass-inline-svg-image.git inline-svg cd inline-svg/example python -m SimpleHTTPServer 罗盘 参见 生成样式表： compass compile 或者 sass --compass --require '../../inline-svg-image.rb' sass/example.sass > css/example.c
html div 转换图片,Javascript – 将带有SVG的HTML div转换为图像
weixin_42393526的博客
05-31 302
我想你正在处理一些svg到位图转换的边缘情况.我不确定html2canvas使用哪种方法,但它肯定缺少这里的东西.我编写了一个函数来处理一些在调用html2canvas之前可以使用的边缘情况,因为它能够毫无问题地绘制位图.// without converting the svg to pnghtml2canvas(contentDiv, {onrendered: function(can) {d...
vue-svg-inline-plugin:Vue插件，用于用SVG文件的实际内容内联替换SVG图像
05-10
vue-svg-inline-plugin 插件，用于用SVG文件的实际内容内联替换SVG图像。 :warning: React性绑定不会转移到SVG替换中。 SVG文件应事先进行优化（例如：使用或 ）。 占位符的图像应该被预先优化（例如：使用或 / ）。 与 @ 2和 @ 3兼容。 目录： 用法 指示 延迟加载 配置 填充胶 例子 安装 包管理器 npm [软件包]： $ npm install vue-svg-inline-plugin --save 纱线[包]： $ yarn add vue-svg-inline-plugin 旧版浏览器 unpkg [软件包]： < script src =" //unpkg.com/vue-svg-inline-plugin " > </ script > jsDelivr [ package ]： < script src ="
在vue项目中使用svg
weixin_30552635的博客
05-21 214
首先，为什么要选择svg，理由是 1.兼容性，现在svg的基本兼容性已经很好了。在canIuse中可以查看。 2.相比较传统的图片，svg在放大的时候不会失真 3.因为svg是xml形式的，利于浏览器seo搜索，所以一般logo强烈建议用svg 4.可以修改颜色和宽高（fill,width,height) 5.性能，性能是前端很重要的一个指标，svg相比iconfont图标整体加载性能要...
SVG图片颜色设置无效解决方法-前端
热门推荐
苍老师背后的男人
09-08 1万+
想让svg图片的颜色跟随父元素的color值变化，可先用编辑器打开svg图片文件，修改以下2点后保存即可： 在svg标签中加上 fill="currentColor" 在path标签中去掉 fill="..."，或者改为 fill="currentColor" 拿到的svg图片如果是自带颜色的，一般父元素的颜色设置就会无效，那么就需要修改以上2点。特别是第2点，因为path标签中的d=”..."很长，而 fill="..." 通常放在标签的末尾，容易看漏。 举个例子： //父元素设置red无.
SVG In HTML5 Pages
萌萌的It人 www.itmmd.com
05-25 1591
这是效果图：   1 DOCTYPE html> 2 html> 3 head> 4 meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 5 title>geovindu svgtitle> 6 head> 7 body> 8 9 svg width="640" height="
推荐 7 个 Vue.js 插件，也许你的项目用的上（五）
前端达人
03-06 770
当我们可以通过使用库轻松实现相同的结果时，为什么还要编写自定义功能？开发人员最好的朋友和救星就是这些第三方库。我相信一个好的项目会利用一些可用的最佳库。Vue.js 是创建用户界面的最佳 JavaScript 框架之一。这篇文章是关于 Vue.js 的优秀库系列的五部分，在该系列中，我总是每篇介绍 7 个 Vue.js 相关库，它们将在您的开发之旅中提供帮助。1、Modal弹出框是前端开发中最常用...
inline_svg：将SVG文档嵌入到Rails视图中并使用CSS设置样式
02-05
内联SVG 通过其内联HTML中，可以最可靠地实现使用CSS样式化SVG文档以在网络上使用。 该gem添加了Rails帮助器方法（ inline_svg_tag和inline_svg_pack_tag ），该方法读取SVG文档（通过Sprockets或Webpacker，因此可与Rails Asset Pipeline一起使用），将CSS类属性应用于文档的根，然后将其嵌入视图中。 内联SVG支持： （来自 ） （来自 ） 带Sprockets或Webpacker的 （来自 ）。 变更日志 该项目遵循。 所有显着的更改都记录在。 安装 将此行添加到您的应用程序的Gemfile中：
html-webpack-inline-svg-plugin:使用html webpack插件时内嵌svg
05-02
html-webpack-inline-svg-plugin 在解析的模板的输出html中，将.svg文件转换为内联的<svg>标记。 目录 贡献 执照 概述 通过内联SVG，您可以将它们与诸如SVG Sprites的Icon System之类的技术结合使用。 从1.0.0版开始，默认情况下，此插件在将所有模板和图像文件写入其对应的输出目录后，将处理SVG文件。 在webpack解析所有文件位置之后，这使其可以与加载程序一起使用。 请注意：要使用别名，您将需要安装加载程序来解析svg路径并解析html模板。 有关更多信息，请参见进入SVG部分。 从1.1.0版开始，该插件还可以在模板输出之前运行。 这使您可以从项目的根目录引用图像文件，这可以帮助您访问某些文件，即在node_modules目录中。 下面提供了更多信息：设置runPreEmit选项。 该插件依靠SVGO来优化SV
rollup-plugin-vue-inline-svg:汇总插件，可将svg文件转换为优化的vue组件
05-07
汇总插件vue在线svg 一个简单的插件，可以将svg文件作为vue组件导入。 它旨在与一起使用，并且基于 。 安装 npm install --save-dev rollup-plugin-vue-inline-svg 用法 rollup.config.js import svg from 'rollup-plugin-vue-inline-svg' ; import vue from 'rollup-plugin-vue' ; // optional export default { // ... plugins : [ svg ( config ) vue ( ) , // optional ] } 配置 默认情况下，此插件将尝试转换以扩展名.svg结尾的所有文件。 您可以通过传递include和exclude选项来更加明确。 // `include
vue-inline-svgs
03-29
内联-svg 项目设置 npm i vue-svgs-inline 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue-svg-inline-loader：Webpack加载器，用于用Vue项目中的SVG文件的实际内容内联替换SVG图像
02-06
vue-svg-inline-loader 加载器，用于在项目中用SVG文件的实际内容内联替换SVG图像。 加载程序仅解析HTML模板格式。 Loader具有用于SVG优化的内置支持。 Sprite选项仅适用于方法。 Vue CLI 通过创建的项目不是基于构建的，而是使用Vite（基于构建的）。 在这种情况下，此加载程序将无法工作。 请看一下 ，它的工作原理与此加载程序相似。 显着变化 v2.1.0 添加了新选项： v2.0.0 删除了翻译版本 删除了 @ 2依赖性 使用最新的CLI重新创建了所有示例（香草Webpack除外） v1.5.0 添加了新选项： 添加了新选项：
postcss-inline-svg:PostCSS插件可引用SVG文件并使用CSS语法控制其属性
05-02
插件可引用SVG文件并使用CSS语法控制其属性。 @svg-load nav url( img/nav.svg ) { fill : #cfc ; path :nth-child ( 2 ) { fill : #ff0 ; } } .nav { background : svg-inline (nav); } .up { background :...
babel-plugin-inline-svg：Babel插件以优化和内嵌svg
01-31
将原始SVG文件导入到您的代码中，使用优化，并消除ID名称空间冲突。 它做什么 1.将import语句转换为内联SVG字符串 所以这： import someSvg from "some-svg.svg" ; 变成这个： var someSvg = '<svg width=...
react-svg-inline：已弃用，建议您使用SVGR工具
02-06
安装$ npm install react-svg-inline 如果要与webpack一起使用，则可能还需要npm install raw-loader 。用法这是React无状态组件中用法的示例： import React from "react"import SVGInline from "react-svg-inline...
Inline SVG vs Icon Fonts
mmrsdym的专栏
11-20 852
本文由大圆根据Chris Coyier的《Inline SVG vs Icon Fonts [CAGEMATCH]》所译,整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://css-tricks.com/icon-fonts-vs-svg。 ——作者：Chris Coyier ——译者：大圆 当你为一个网站建一套图
如何在vue_cli里面使用svg
最新发布
04-27
在 Vue CLI 中使用 SVG 可以通过以下步骤实现： 1. 安装依赖： `npm install vue-svg-loader svg-inline-loader -D` 2. 在 `vue.config.js` 文件中添加以下配置： ```javascript module.exports = { chainWebpack: config => { const svgRule = config.module.rule("svg"); // 清除已有的所有 loader。 // 如果你只是想添加一个 loader，可以使用 `unshift` 方法。 svgRule.uses.clear(); // 添加要替换的 loader svgRule .use("vue-svg-loader") .loader("vue-svg-loader") .end() .use("svg-inline-loader") .loader("svg-inline-loader") .end(); } }; ``` 3. 在组件中使用 SVG： ```vue <template> <div> <svg-icon name="example" /> </div> </template> <script> export default { components: { SvgIcon: () => import("@/components/SvgIcon.vue") } }; </script> ``` 在 `@/components/SvgIcon.vue` 文件中，可以定义一个 `props` 接收 `name`，然后使用 `require` 导入对应的 SVG 图标，并使用 `v-html` 渲染到页面上： ```vue <template> <div v-html="icon"></div> </template> <script> export default { props: { name: { type: String, required: true } }, computed: { icon() { return require(`@/assets/svg/${this.name}.svg`); } } }; </script> ``` 注意：以上代码仅供参考，具体实现可能因具体项目而异。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值