精华内容
下载资源
问答
  • vuesvg格式图片使用 1、首先先引入这个图片 import phone from '@/assets/Icon/phone.svg' // 电话 2、在data里面定义一下 data(){ return{ phone } } 3、在其他文件中使用时 <div class="icon">...

    vue中svg格式图片的使用

    1、首先先引入这个图片

    import phone from '@/assets/Icon/phone.svg' // 电话
    

    2、在data里面定义一下

    data({
     return{
     	phone
      }
     }
    

    3、在其他文件中使用时

     <div class="icon">
              <GreatIcon type="phone" class="icon-img" /> <span>电话:</span>
      </div>
    

    在script中引入

    import GreatIcon from '@/components/Icon.vue'
    
    展开全文
  • vue使用svg图片

    千次阅读 2020-08-07 14:14:08
    第一步在阿里巴矢量图库选中图片下载symbol格式的 将下载的素材存放在static文件夹下 然后在mian.js里面添加下面代码 import "../static/iconfont.js" import "../static/iconfont.css" 然后写组件 &...
    1. 第一步在阿里巴矢量图库选中图片下载symbol格式的
    2.  将下载的素材存放在static文件夹下
    3. 然后在mian.js里面添加下面代码
    4. import "../static/iconfont.js"
      import "../static/iconfont.css"

      然后写组件

    5. 
      <template>
        <div>
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="iconName"></use>
          </svg>
        </div>
        
      </template>
      
      <script>
      export default {
        name: 'icon-svg',
        props: {
          iconClass: {
            type: String,
            required: true
          }
        },
        computed: {
          iconName() {
            return `#icon-${this.iconClass}`
          }
        }
      }
      </script>
      
      <style>
      .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
      </style>

       然后引入组件使用

    6.  

    最后的代码使用

    	<icon-svg icon-class="jisutuikuan" />

     完了

    展开全文
  • vue使用svg

    2021-06-28 14:01:15
    网络上有很多教程,但是...SVG 使用 XML 格式定义图形 2.为什么使用svg 不失真 可以方便地修改颜色,实现不同状态的切换 其DOM结构,可以被js较好的控制 3.缺点 不能表示复杂图形 在Vue使用相对复杂 不能与HTML兼.

    网络上有很多教程,但是我还是搜索了很多地方,走了一些坑,不确定一定会帮助大家,但应该可以给大家一些参考,所有代码都自己测试通过,如果不能用,可能是我少写了一些东西,大家可以在评论区指出
    新手,希望与大家一起成长,轻喷,谢谢!

    svg简介

    1.啥是SVG

    Scalable Vector Graphics,指可伸缩矢量图形.
    SVG 使用 XML 格式定义图形

    2.为什么使用svg

    1. 不失真
    2. 可以方便地修改颜色,实现不同状态的切换
    3. 其DOM结构,可以被js较好的控制

    优缺点随便写的,别太当真啊

    3.缺点

    1. 不能表示复杂图形
    2. 在Vue中使用相对复杂
    3. 不能与HTML兼容
    4. 浏览器兼容问题IE8及Android2.3浏览器不兼容(我觉得这是优点)

    vue使用svg

    1.新建svg一个组件-用于渲染svg

    我的脚本存放目录 ./src/components/SvgIcon.vue

    至于props变量为什么叫iconClass我也不知道,网上都是这么写的,反正我用起来觉得怪怪的,当然可以自己改一个名字

    <template>
        <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
            <use :xlink:href="iconName" />
        </svg>
    </template>
    
    <script>
    export default {
        name: 'SvgIcon',
        props: {
            iconClass: {
                type: String,
                required: true
            },
            className: {
                type: String,
                default: ''
            }
        },
        computed: {
            iconName() {
                return `#icon-${this.iconClass}`
            },
            svgClass() {
                if (this.className) {
                    return 'svg-icon ' + this.className
                } else {
                    return 'svg-icon'
                }
            }
        }
    }
    </script>
    
    <style scoped>
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    </style>
    
    

    2.新建一个文件夹用于存放svg

    目录 ./src/icons/svg/
    可以包含子目录
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9NJwagpE-1624860063998)(md_img/2021-06-28-13-49-33.png)]
    注意一下最下边的index.js,用来读取所有svg文件的

    3.新建一个index.js用于读取svg

    import Vue from 'vue'
    import SvgIcon from '../components/custom/SvgIcon.vue'// svg组件
    
    // register globally
    Vue.component('svg-icon', SvgIcon)
    
    //第一个参数是要遍历的目录,第二个参数指定是否遍历子目录,网络上其它地方一般都是false
    const req = require.context('./svg', true, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)
    

    4.配置webpack读取规则

    在vue.config.js中添加webpack的规则,如果没有这个文件则创建一个放在项目的根目录,因为不同人的配置文件不同,所以这里只放部分代码,以表示配置在什么地方

    module.exports = {
     chainWebpack: config => {
            // 添加别名(src默认为@,不用再次添加)
            config.resolve.alias
                .set('@pub', resolve('public')) // 设置public别名为@pub
    
            config.module
                .rule('svg')
                .exclude.add(resolve('src/icons'))
                .end()
            config.module
                .rule('icons')
                .test(/\.svg$/)
                .include.add(resolve('src/icons'))
                .end()
                .use('svg-sprite-loader')
                .loader('svg-sprite-loader')
                .options({
                    symbolId: 'icon-[name]'
                })
                .end()
        },
    }
    

    5.在main.js文件中

    import './icons'//放index.js的文件夹
    
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
    
    

    6.使用svg

    <template>
        <div class="left">
            <svg-icon class="svg-pic" icon-class="项目"></svg-icon>
        </div>
    </template>
    
    <script>
    export default {
        name: "ToolBar",
        data(){
            return {
            }
        }
    }
    </script>
    
    <style scoped>
    .svg-pic{
        color:red
    }
    </style>
    
    
    1. icon-class直接写svg的名称即可
    2. 通过css可以修改颜色
    3. iconfont上下载的多数svg文件都可以使用

    参考网站

    【1】Vue中使用svg
    【2】实现Vue 中可编辑的 SVG Icon 组件
    【3】svg-sprite-loader 在cli3中vue.config.js 中的配置
    【4】vue中封装svg-icon组件并使用

    展开全文
  • 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader 首先呢自然就是安装了 npm i svg-sprite-loader --save 复制代码创建svg文件目录/src/icons/svg 里面呢放置所有svg文件 ...

    svg的图片有着颜色自定义大小自定义的优势。在阿里图标库可以下载svg图片。

    那么在vue框架中我们该怎么使用svg图片呢

    这个时候就用到了 webpack 插件 svg-sprite-loader

    首先呢自然就是安装了

    npm i svg-sprite-loader --save
    复制代码

    创建svg文件目录/src/icons/svg 里面呢放置所有svg文件 还有/src/icons/index.js

    //index.js
    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'
    /* require.context("./test", false, /.test.js$/);
        这行代码就会去 test 文件夹(不包含子目录) 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
        更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
         require.context有三个参数:
         directory:说明需要检索的目录
         useSubdirectories:是否检索子目录
         regExp: 匹配文件的正则表达式 */
    // 全局注册
    Vue.component('svg-icon', SvgIcon)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    const req = require.context('./svg', false, /\.svg$/)
    requireAll(req)
    复制代码

    在 webpack.base.conf.js 文件中添加 rules 配置

           //webpack.base.conf.js
          {
            test: /\.svg$/,
            loader: "svg-sprite-loader",
            include: [path.resolve(__dirname, '../src/icons/svg')],//包括字体图标文件
            // options: {
              //symbolId: 'icon-[name]' //这个没有生效,生效的是默认的name
            // }
          }
    复制代码

    然后修改 url-loader 配置

           //webpack.base.conf.js
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: "url-loader",
            exclude: [
              path.resolve(__dirname, '../src/icons/svg'), //排除字体图标文件
            ],
            options: {
              limit: 10000,
              name: utils.assetsPath("img/[name].[hash:7].[ext]")
            }
          }
    复制代码

    创建 vue 组件 svg-icon

    <!-- @/components/SvgIcon -->
    <template>
        <svg :class="svgClass" aria-hidden="true" @click="$emit('click')">
            <use :xlink:href="iconName"></use>
        </svg>
    </template>
    
    <script>
    /**
     * svg 图标组件
     * iconClass="图标名称"
     * className="风格名称"
     */
    export default {
      name: 'svg-icon',
      props: {
        iconClass: { type: String, required: true },
        className: { type: String }
      },
      computed: {
        iconName () {
          return `#${this.iconClass}`
        },
        svgClass () {
          if (this.className) {
            return 'svg-icon ' + this.className
          } else {
            return 'svg-icon'
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .svg-icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>
    
    复制代码

    在main.js中引入

    import './icons/index.js'
    复制代码

    这样就能在vue中使用了 具体格式如下

    <svg-icon icon-class="svg文件名"/>
    复制代码

    欢迎到我的博客、我的github逛哦!

    我的博客:http://blog.luyu.fun

    我的github:https://github.com/panyu97py/

    转载于:https://juejin.im/post/5c693d3af265da2dc231d7ea

    展开全文
  • 关于在vue使用.svg格式图片

    千次阅读 2019-05-11 17:11:46
    1.他不同于.png .jpeg 那样的图片,如果在vue中想要使用的话,第一步安装 cnpm i vue-svg-icon -D 2.在main.js文件中添加 3.重要的一步 必须保证在src下有一个svg文件夹 4.最后直接在组件中使用就OK了 ...
  • 创建vue-cli2.0略过 一、下载svg包 npm i svg-sprite-loader@4.1.3 二、配置vue-config.js文件 vue-config.js 没有就自己创一个 放在项目根目录哦 'use strict' const path = require('path') function ...
  • VUE 使用 svg-icon 标签

    2020-04-04 19:04:08
    @[TOC](这里写定义目录标题) svg-icon标签可以用来...svg存放自定义的图片svg格式) index.js import Vue from 'vue' import SvgIcon from '@/components/SvgIcon'// svg component // register globally Vue....
  • 一、使用svg的好处 未来必热:SVG Sprite技术介绍 第一种方式: 二、安装svg-sprite-loader npm install svg-sprite-loader --save-dev 三、webpack 配置(build/webpack.base.conf.js) { test: /\.svg...
  • Vue自定义icon-svg组件 uniapp自定义iconfont组件 打开 https://www.iconfont.cn/ 阿里巴巴图标库,找到需要的图标添加到购物车
  • vue使用svg

    2019-02-28 11:33:22
    最近的时候发现各种各样的使用svg-icon的操作方法,其中有种个人觉得最简便的方法,有必要种个草 1.使用命令安装 npm installvue-svg-icon --save-dev 2.在main.js中引入 import Icon from 'vue-svg-icon/Icon....
  • 用的element以及antd图标种类都比较少,不够实用,学别人引用svg的图标库 一、引入svg准备 安装依赖npm install svg-sprite-loader --save-dev 配置build文件夹中的webpack.base.conf.js 添加1:exclude: [resolve...
  • 使用vue-svg-loader插件, 可以让svg格式的文件(比如图片),当成组件在项目中引入, 十分方便。 但是有时会出现"Invalid component definition"报错, 需要我们在webpack中配置一下 module.exports = { //1. 需先删除...
  • Vue使用 Svg 图片Vue使用 svg 格式图片需要导入 svg-sprite-loader 的依赖库 1.
  • vuesvg 图标使用

    2019-08-15 11:16:15
    npm install svg-sprite-loader --save-dev 2..配置build文件夹中的webpack.base.conf.js,主要在两个地方添加代码,如下图所示 { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('s...
  • svg写的时候,发现图标不显示,只有文字显示。然后网上搜的方法,用插件实现。 安装 ...在src文件夹下新建svg文件夹,把下载好的svg的图标放入,在 vue 组件按需加载: scale:可以调试图标大小
  • VUE使用svg图标

    2020-04-02 10:58:41
    目录一 安装依赖二:配置webpack2.1 首先创建一个svg文件用来保存图标2.2 配置build文件夹中的webpack.base.conf.js三 配置svg组件3.1. 在src/components下新建文件夹及文件SvgIcon/index.vue3.2. index.vue内容3.2 ...
  • element适配svg格式图片

    2020-12-24 19:53:41
    SVG格式图片的配置 名词解释: svg是可缩放矢量图形,顾名思义就是任意改变其大小也不会变形,基于可扩展标记语言(xml),他严格遵守XML语法,并用文本格式的描述性语言来描述图像内容。用户可以直接用代码来描述...
  • img: SVG格式vue中的使用

    千次阅读 2020-05-24 17:48:13
    SVG格式vue中的使用 SVG:svg是一种图像文件格式,它是可缩放的矢量图形,它是基于XML,由World Wide Web Consortium (W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、 ...
  • vue使用svg图片

    2021-05-10 18:34:22
    2.配置svg图片使用svg-sprite-loader来编译----在webpack.base.config.js中的配置修改 添加svg编译 { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId: '...
  • 封装SVG格式图片vue分装成组件步骤如下 1.安装svg-sprite-loader插件,运行以下命令: npm i svg-sprite-loader -D 2. webpack4.0版本中的配置:在vue.config.js chainWebpack添加配置 chainWebpack: ...
  • 在项目中遇到svg格式的icon图标无法显示颜色,这个问题。尝试过很多方法,最后发现不是代码的问题,而是iconfont图标库中没有配置好。 1. 发现问题如下 当点击菜单选项时,icon和文字同时变色。 2. 解决方案 第一...
  • Vue项目中使用svg图标

    2020-09-23 17:58:50
    在src/components下新建文件夹及文件svgIcon/index.vue,index.vue中内容如下: <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName"/> <...
  • 如何在vue脚手架中使用svg图标 1.安装依赖 npm i svg-sprite-loader@4.1.3 2.配置 vue.config.js const path = require('path') function resolve (dir) { return path.join(__dirname, dir) } module.exports = ...
  • .svg是一种通过代码的方式来展示的图片格式(.png, .gif.....) 学习网站:https://www.runoob.com/svg/svg-tutorial.html 在这里去下载你要用的svg:https://www.iconfont.cn/

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,927
精华内容 1,570
关键字:

vue使用svg格式图片

vue 订阅