精华内容
下载资源
问答
  • vue-svg-icon vue2图标方案中多色svg图标的解决 v1.2.9 演示: : 特征: 不再需要在main.js中注入SVG 支持SVG的路径,圆,椭圆,矩形,线,折线,多边形标签 支持SVG中的分组标签 在Illustrator或素描中进行实时...
  • vuevue 所有图标、vue Icon 所有图标、vue 图标所有类型、vue 自定义图标 Icon使用方法1.线框风格1.方向性图标2.提示建议性图标3.编辑类图标4.数据类图标5.网站通用图标6.品牌和标识2.实底风格1.方向性图标2.提示...

    使用方法

    	<!--使用时将属性type换成对应的图标名字即可-->
    	<a-icon type="step-backward" />
    	<a-icon type="step-forward" />
    	<a-icon type="fast-backward" />
    

    1.线框风格

    1.方向性图标

    2.提示建议性图标

    在这里插入图片描述

    3.编辑类图标

    在这里插入图片描述

    4.数据类图标

    在这里插入图片描述

    5.网站通用图标

    在这里插入图片描述

    6.品牌和标识

    在这里插入图片描述

    2.实底风格

    1.方向性图标

    在这里插入图片描述

    2.提示建议性图标

    在这里插入图片描述

    3.编辑类图标

    在这里插入图片描述

    4.数据类图标

    在这里插入图片描述

    5.网站通用图标

    在这里插入图片描述

    6.品牌和标识

    在这里插入图片描述

    3.双色风格

    1.方向性图标

    在这里插入图片描述

    2.提示建议性图标

    在这里插入图片描述

    3.编辑类图标

    在这里插入图片描述

    4.数据类图标

    在这里插入图片描述

    5.网站通用图标

    在这里插入图片描述

    6.品牌和标识

    在这里插入图片描述

    4.使用方法

    1.基本用法

    在这里插入图片描述

    <template>
      <div class="icons-list">
        <a-icon type="home" />
        <a-icon type="setting" theme="filled" />
        <a-icon type="smile" theme="outlined" />
        <a-icon type="sync" spin />
        <a-icon type="loading" />
      </div>
    </template>
    <style scoped>
    .icons-list >>> .anticon {
      margin-right: 6px;
      font-size: 24px;
    }
    </style>
    

    2.自定义图标

    在这里插入图片描述

    <template>
      <div class="custom-icons-list">
        <heart-icon :style="{ color: 'hotpink' }" />
        <panda-icon :style="{ fontSize: '32px' }" />
      </div>
    </template>
    <script>
    const HeartSvg = {
      template: `
        <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
          <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
        </svg>
      `
    }
    const PandaSvg = {
      template: `
        <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
          <path d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z" fill="#6B676E" p-id="1143" />
          <path d="M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z" fill="#FFEBD2" p-id="1144" />
          <path d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z" fill="#E9D7C3" p-id="1145" />
          <path d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z" fill="#FFFFFF" p-id="1146" />
          <path d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z" fill="#6B676E" p-id="1147" />
          <path d="M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z" fill="#464655" p-id="1148" />
          <path d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z" fill="#464655" p-id="1149" />
          <path d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z" fill="#464655" p-id="1150" />
        </svg>
      `
    }
    
    const HeartIcon = {
      template: `
        <a-icon :component="HeartSvg" />
      `,
      data() {
        return {
          HeartSvg
        }
      }
    }
    
    const PandaIcon = {
      template: `
        <a-icon :component="PandaSvg" />
      `,
      data() {
        return {
          PandaSvg
        }
      }
    }
    
    export default {
      components: {
        HeartIcon,
        PandaIcon,
      }
    }
    </script>
    <style scoped>
    .custom-icons-list >>> .anticon {
      margin-right: 6px;
    }
    </style>
    

    3.使用 iconfont.cn

    在这里插入图片描述

    <template>
      <div class="icons-list">
        <a-icon type="smile" theme="twoTone" />
        <a-icon type="heart" theme="twoTone" twoToneColor="#eb2f96" />
        <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
      </div>
    </template>
    <style scoped>
    .icons-list >>> .anticon {
      margin-right: 6px;
      font-size: 24px;
    }
    </style>
    

    5.API

    参数 说明 类型 默认值
    type 图标类型。遵循图标的命名规范 string -
    style 设置图标的样式,例如 fontSize color CSSProperties -
    theme 图标主题风格。可选实心、描线、双色等主题风格,适用于官方图标 'filled' | 'outlined' | 'twoTone' 'outlined'
    spin 是否有旋转动画 boolean false
    component 控制如何渲染图标,通常是一个渲染根标签为 <svg> Vue 组件,会使 type 属性失效 ComponentType<CustomIconComponentProps> -
    twoToneColor 仅适用双色图标。设置双色图标的主要颜色 string (十六进制颜色) -

    SVG 图标

    1.2.0 之后,我们使用了 SVG 图标替换了原先的 font 图标,从而带来了以下优势:

    • 完全离线化使用,不需要从 CDN 下载字体文件,图标不会因为网络问题呈现方块,也无需字体文件本地部署。
    • 在低端设备上 SVG 有更好的清晰度。
    • 支持多色图标。
    • 对于内建图标的更换可以提供更多 API,而不需要进行样式覆盖。

    更多讨论可参考:#10353

    ⚠️ 1.2.0 之后我们全量引入了所有图标,导致 antd 默认的包体积有一定增加,我们会在不远的>未来增加新的 API 来实现图标的按需使用,更多相关讨论可关注:#12011

    其中themecomponenttwoToneColor的英文1.2.x版本新增加的属性最佳实践的英文给使用的。<Icon />组件传入属性theme以明确图标种植的主题风格例如:

    的所有图标种植都会以<svg>标签渲染,使用可以style状语从句:class设置图标种植的大小单色状语从句:图标种植的颜色例如:

    双色图标主色

    对于双色图标,通过可以使用`Icon.getTwoToneColor()`状语从句:`Icon.setTwoToneColor(colorString)`来全局设置图标种植主色。
    import { Icon } from 'ant-design-vue'
    
    Icon.setTwoToneColor('#eb2f96');
    Icon.getTwoToneColor(); // #eb2f96
    

    自定义字体图标#
    1.2.0之后,提供我们一个了createFromIconfontCN方法,开发网求方便者调用在iconfont.cn上自行管理的图标种植。

    const MyIcon = Icon.createFromIconfontCN({
      scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
    });
    new Vue({
      el: '#app',
      template: '<my-icon type="icon-example" />',
      components: {
        'my-icon': MyIcon,
      }
    })
    

    其本质上是创建了一个使用 <use> 标签来渲染图标的组件。

    options 的配置项如下:

    参数 说明 类型 默认值
    scriptUrl iconfont.cn 项目在线生成的 js 地址 string -
    extraCommonProps 给所有的 svg 图标 <Icon /> 组件设置额外的属性 { class, attrs, props, on, style } {}

    scriptUrl 都设置有效的情况下,组件在渲染前会自动引入 iconfont.cn 项目中的图标符号集,无需手动引入。

    iconfont.cn 使用帮助 查看如何生成 js 地址。

    自定义SVG图标

    如果使用vue cli 3,可以通过配置VUE-SVG-装载机来将svg图标种植作为Vue组件导入。更多vue-svg-loader的使用方式请参阅文档

    // vue.config.js
    module.exports = {
      chainWebpack: (config) => {
        const svgRule = config.module.rule('svg');
    
        svgRule.uses.clear();
    
        svgRule
          .use('vue-svg-loader')
          .loader('vue-svg-loader');
      },
    };
    
    import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
    
    new Vue({
      el: '#app',
      template: '<a-icon :component="MessageSvg" />',
      data() {
        return {
          MessageSvg
        }
      }
    })
    

    Icon的中component组件的接受的属性如下:

    字段 说明 类型 只读值
    width svg 元素宽度 string | number '1em'
    height svg 元素高度 string | number '1em'
    fill svg 元素填充的颜色 string 'currentColor'
    class 计算后的 svg 类名 string -
    style 计算后的 svg 元素样式 string -
    展开全文
  • <div><p>Hi I wanna use a material icon for sort icon but can't find a way to do it. e.g I wanna use the following icon. <code><i class="...matfish2/vue-tables-2</p></div>
  • vue icon dosent show

    2021-01-07 02:55:23
    </li><li>Icon Name: <code>vue</code></li><li>Sample original Icon: <img alt="logo" src="" /></li><li>Extensions: <code>vue</code></li><li>Filenames: ``</li><li> <p>Language ids: `` ...
  • vue使用icon

    2020-08-20 16:10:17
    我想给浏览器上加个icon图标样, 例如下图 第一步 首先准备一张图片 然后去比特虫网站制作icon图标 第二步 static导入图片 第三步 inde.html引入 <head> <meta charset="utf-8"> <meta name=...

    场景描述

    我想给浏览器上加个icon图标样,

    例如下图

    在这里插入图片描述

    第一步

    首先准备一张图片
    然后去比特虫网站制作icon图标

    在这里插入图片描述

    第二步

    static导入图片
    在这里插入图片描述

    第三步 inde.html引入

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel ="shortcut icon" type="image/x-icon" href="static/img/bitbug_favicon.ico">
      <title>项目练习</title>
    

    在这里插入图片描述

    展开全文
  • 前言icon在我们前端日常开发中是很常用的,它有很多种使用方式,时至今日,它的使用方式经过了很多种演变,本文会为大家介绍icon的一些历史演变,分析一下这几种使用方式的优劣,我们将采用svg sprites这种方式使用...

    前言

    icon在我们前端日常开发中是很常用的,它有很多种使用方式,时至今日,它的使用方式经过了很多种演变,本文会为大家介绍icon的一些历史演变,分析一下这几种使用方式的优劣,我们将采用svg sprites这种方式使用icon,演示代码使用vue+vue-cli3+,看完之后,你会发现这种使用方式完全称得上优雅二字

    追溯历史

    Img标签引入

    最早我们使用图标时只是单纯img标签引入图片,个人感觉也还好

    但是这样网页上会有很多img图标的资源请求,这是它最大的缺点

    雪碧图(css sprites)

    后来我们为了优化资源请求开始使用CSS雪碧图(css sprites)

    CSS Sprites在国内很多人叫css精灵/css雪碧图(啥都行),是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。加速的关键,不是降低质量,而是减少个数

    CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的background-image background- repeat background-position的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置

    利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点

    同时它的缺点也很明显,CSS Sprites在开发的时候比较麻烦,需要计算基准位置来进行定位,维护的时候往往改动一个图标我们就得改整个雪碧图,一不小心就搞得整个网页的图标错位了

    font库

    再到后来就出现了font库,也就是字体图标库,它出现给了我们开发很大便利,使用起来也非常方便,字体图标为什么方便,因为我们可以直接从市面上的font字体图标库里找图标,直接使用,还可以很好的控制一些基础样式

    国内估计使用量最大也是最全的图标库我觉得就是阿里矢量图标库(iconfont)了,各种图标简直不要太多,最重要的是开源免费

    拿iconfont来说,它有三种使用方式,分别是unicode,font-class,symbol,都非常简单

    当然,没有使用过的小伙伴直接百度搜索关键词iconfont使用,相信看一看就会了

    接下来我们来看下这三种方式的优缺点(官方的):

    font使用方式对比

    unicode引用


    unicode是字体在网页端最原始的应用方式,特点是:

    • 兼容性最好,支持ie6+,及所有现代浏览器。

    • 支持按字体的方式去动态调整图标大小,颜色等等。

    • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

    注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式

    unicode使用步骤如下:

    第一步:拷贝项目下面生成的font-face
    @font-face {font-family: 'iconfont';   src: url('iconfont.eot');   src: url('iconfont.eot?#iefix') format('embedded-opentype'),   url('iconfont.woff') format('woff'),   url('iconfont.ttf') format('truetype'),   url('iconfont.svg#iconfont'format('svg'); }
    第二步:定义使用iconfont的样式
    .iconfont{   font-family:"iconfont" !important;   font-size:16px;font-style:normal;   -webkit-font-smoothing: antialiased;   -webkit-text-stroke-width0.2px;   -moz-osx-font-smoothing: grayscale;}
    第三步:挑选相应图标并获取字体编码,应用于页面
    class="iconfont">&#x33;

    font-class引用


    font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

    与unicode使用方式相比,具有如下特点:

    • 兼容性良好,支持ie8+,及所有现代浏览器。

    • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。

    • 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。

    • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

    使用步骤如下:

    第一步:拷贝项目下面生成的fontclass代码:
    //at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
    第二步:挑选相应图标并获取类名,应用于页面:
    class="iconfont icon-xxx">i>

    symbol引用


    这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:

    • 支持多色图标了,不再受单色限制。

    • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。

    • 兼容性较差,支持 ie9+,及现代浏览器。

    • 浏览器渲染svg的性能一般,还不如png。

    使用步骤如下:

    第一步:拷贝项目下面生成的symbol代码:
    //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
    第二步:加入通用css代码(引入一次就行):
    <style type="text/css">    .icon {        width: 1em; height: 1em;        vertical-align: -0.15em;        fill: currentColor;        overflow: hidden;    }style>
    第三步:挑选相应图标并获取类名,应用于页面:
     class=     <use xlink:href="#icon-xxx">use> </svg>

    以上三种使用姿势的优缺点相信大家都了解了,symbol这中使用方式就是本文的正题了,其实之前我是一直都使用font-class这种方式的(大家估计用这个的也很多),但是它有点麻烦,因为我每次迭代项目时,修改或者添加图标都要去重新下载一份新的包,还不支持多色图标,但是现在我觉决定换了它,因为get到了一种更好的方式,它就是symbol

    symbol它支持多色图标,兼容性到ie9+,这也没什么,毕竟某e浏览器差不多凉透了,浏览器渲染svg性能这个也可以不用担心,早在14年张鑫旭的一篇帖子 SVG Sprite介绍 完美诠释了svg sprite的工作方式,并且对其很看好,或许这就是大佬的眼光吧 - _ -

    单纯使用iconfont官方那种symbol方式其实是有点low的,实际开发中我们可以结合项目,让他变得简单,接下来我们就要进入本文正题,优雅使用icon了,哈哈哈,码这么多字,我太难了

    项目中优雅使用icon

    搭建环境获取图标

    我们使用vue-cli3搭建项目

    怎么样才算优雅,首先我们在src目录下新建icons/文件夹,在icons/文件夹下建svg/文件夹,将来我们项目中的svg图标都会统一放在这里

    接下来我们在官网搞来一个svg图标

    017a5a6db88ed16fc736dc240dcde4d8.png

    98332021140ede851249655706d53e7e.png

    点击svg下载到icons/svg目录下修改文件名为qq.svg,或者是在icons/svg目录下新建一个qq.svg文件,把复制的svg代码放进去也可以

    这样就获取到了一个图标,很easy

    处理svg图标

    vue-cli对svg文件有默认的url-loader 处理,我们要使用svg 图标需单独进行配置

    下载一个插件svg-sprite-loader来单独处理我们的svg图标,它是一个webpack loader,支持将多个svg打包成svg sprites

    npm下载

    npm install svg-sprite-loader -D

    yarn下载

     yarn add svg-sprite-loader -D

    我们要怎么使用它呢,首先我们不能覆盖原有的svg解析loader,我们只需要把icons/svg这个文件夹下的svg文件解析打包即可,我们在vue.config.js中chainWebpack函数中配置,来看代码

    // 内置路径包const path = require("path");// 定义resolve方法,获取绝对路径function resolve(dir) {  return path.join(__dirname, dir);}module.exports = {  // 一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例  // 允许对内部的 webpack 配置进行更细粒度的修改  chainWebpack: config => {    // 配置svg默认规则排除icons目录中svg文件处理    config.module      .rule("svg")      .exclude.add(resolve("src/icons"))      .end();    // 新增icons规则,设置svg-sprite-loader处理icons目录中svg文件    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();  }}

    如果我们不清楚cli的默认配置,怕改错,可通过vue inspect审查webpack内部配置,详细请看: inspect使用

    上面代码中我们使用了webpack的链式高级用法来处理loader,首先排除了默认svg的loader对我们icons/目录下svg文件的处理,然后新增了一个规则让svg-sprite-loader处理我们icons/文件夹下的svg文件,最后我们设置了icon-加上经过处理的svg文件名作为symbolId,也就是说我们在使用qq.svg时可以直接在use标签使用#icon-qq,关于链式操作不了解的小伙伴可以看: 链式操作(高级)

    代码中我们引入了path这样一个内置的包,定义了一个resolve方法,该方法主要是来获取文件绝对路径的,我们把使用路径的地方都使用该方法转为绝对路径,当然使用相对路径也是可以的,但是不太安全,平台解析相对路径有差异性,所以绝对路径是最安全的

    svg sprites图标使用

    现在我们就可以在你想使用图标的位置使用了,使用方式如下

    main.js中引入(全局引入)要使用的图标文件

    import "@/icons/svg/qq.svg";

    模版中使用

    <svg>  <use xlink:href="#icon-qq">use>svg>

    你以为这就完了?不,还远远不够,这样使用一个图标就得引入文件一次也太麻烦了,接着看下文

    进阶-svg文件自动引入

    知道为什么在icons/文件夹下还有一个存放svg文件的svg/文件夹吗,就是为了这一步自动化引入准备的,我们在icons/文件夹下新建index.js文件,两行代码搞定,内容如下

    // icons图标自动加载const req = require.context("./svg", false, /\.svg$/);req.keys().map(req);

    上面代码中我们使用require.context设置了当前目录下的./svg文件为上下文,使用正则匹配了它需要检测的文件名,这样它就会在当前目录的svg文件夹下去匹配符合规则的文件名

    然后我们使用req.keys拿到所有文件名数组,再使用map遍历加载req方法,这样当该文件被调用时会遍历加载所有匹配到的文件,这就很nice了

    看看我们改进后的使用方法:

    注释掉之前的代码,在main.js中引入icons/index.js文件

    import "@/icons/index.js";

    模板中使用和上面一样,不过这次改进当我们再次下载了一个svg图标时,不用再引入一遍图标svg了,因为我们做了自动化,icons/svg/下的svg后缀图标文件都可被自动引入

    <svg>  <use xlink:href="#icon-qq">use>svg><svg>  <use xlink:href="#icon-wx">use>svg>...

    是不是很方便,你以为结束了?不,我们还可以再简化,因为每次使用都得svg标签包着use太麻烦了,写着也不太雅观,我们继续简化,一定要看起来使用起来都十分优雅

    再进阶-SvgIcon组件

    components/目录下新建SvgIcon/index.vue文件,我们写一个svgicon组件,封装一下再全局注册,这样使用起来就会很方便了!

    svg-icon组件代码如下:

    <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>

    当然组件内部我们还可以根据自身项目情况进行扩展,我这边写了基础的配置

    组件写好了之后我们在icons/index.js中进行全局注册,这样我们只引入这一个文件就可以达到自动加载和组件注册两个功能

    icons/index.js改进如下:

    import Vue from "vue";import SvgIcon from "@/components/SvgIcon";// icons图标自动加载const req = require.context("./svg", false, /\.svg$/);req.keys().map(req);// 全局注册svg-icon组件Vue.component("svg-icon", SvgIcon);

    最后就是我们的使用了,在main.js文件引入icons/index.js

    import "@/icons/index.js";

    再来看看我们使用图标的方法,组件中:

    <template>  <svg-icon icon-class="qq" class-name="qq-style">svg-icon>template>

    看,我们只用在icon-class中传入要使用的图标文件名就可以了,当然class-name还可以传入一个类,进行一些简单的样式修改,是不是很优雅,你get到了吗?

    Vue-Awesome

    从掘友那了解到了vue-awesome,体验了一番,很nice,内置了fontawesome字体图标库

    好像也没啥可对比的,svg图标引入原理差不多,vue-awesome除了内置了fontawesome图标库之外也可以自己引入图标使用,做了很全面的封装,针对图标由很多功能,所以使用的话会体积会稍大

    不过个人觉得,有了iconfont图标库,好像没有太大必要去再用fontawesome,fontawesome也并不是全免费,而且国外站点访问很慢,iconfont毕竟是阿里出的,很全,针对icon的话我们可能并不需要太多功能,所以上面我们自己配置的话清晰明了,就已经够用,自己写的话熟悉流程10分钟搭一个,实在不够用,我们可以在组件花些功夫,自己做封装的话针对性强,定制性当然是看我们自己需要了,最靠谱的是使用轮子不如造轮子,哈哈

    vue-awesome是很好的,我们可以从中借鉴一些思路用于自己开发icon组件也是不错的,比如那些功能,我们都可以一一实现下,重要的是过程,哈哈

    ❤️爱心三连击

    1.看到这里了就点个在看支持下吧,你的在看是我创作的动力。

    2.关注公众号猴哥说前端「一起玩转前端」

    3.关注公众号回复【加群】,拉你进技术交流群一起玩转前端。

    32a071971676d02985b5fce8aa0225c8.png“在看转发”是最大的支持
    展开全文
  • vue 组件化项目中如何将svg 组件话呢,这里用到了 vue-svg-icon 使用方法: 1npminstallvue-svg-icon--save-dev 2 下面这两行 代码是写在 main.js 中的,这样整个vue 实例都可以使用 icon 组件了  ...

     在vue 组件化项目中如何将svg 组件话呢,这里用到了 vue-svg-icon 

    使用方法:

    1 npm install vue-svg-icon --save-dev

    2 下面这两行 代码是写在 main.js 中的,这样整个vue 实例都可以使用 icon 组件了

      import Icon from 'vue-svg-icon/Icon.vue';
      Vue.component('icon', Icon);
    3     在你自己的组件代码中加上这行代码就可以引入svg图标了, name 为 src/svg 文件夹下的svg 图标名称.  src文件夹和 node_modules 在同一个文件夹下。
      <icon name="chameleon" :scale="20"></icon>
    这里有一点需要注意,在 执行npm run dev 之前将 svg 图标放入 src/svg  文件夹下,否则会报错。

    转载于:https://www.cnblogs.com/wsz168/p/8757674.html

    展开全文
  • Icon not working with vue

    2020-11-29 18:58:55
    font-awesome-icon icon="edit"></font-awesome-icon> <button> </button></button></code></pre> <p>Threw error in chrome console: <code>Check not find one or more ...
  • Vuevue项目引入icon

    2019-04-20 16:23:40
    一、icomoon:有大量矢量图标,也可以自定义 1、在图标库中下载图标 点击进入icomoon网站点击右上角的“IcoMoon App”,找到自己需要的图标然后点击右下角的... 2、解压图标压缩包得到文件如下图: 3、在vue...
  • <div><p>When bundling the assets of my project for production, Uglify seems to trip over something in Icon.vue: ~~~ error <p>/js/app.js from UglifyJs Unexpected token: name (icons) [Icon.vue?8a3472bc:...
  • 侧边栏 aside.vue <template> $route.path" background-color="#002033" text-color="#fff" active-text-color="#ffd04b" router > <el-menu-item index="/"> <i class="el-icon-s-home">i> 首页span> el-menu-item>...
  • vue项目封装icon

    2019-04-09 04:06:25
    前言 在项目中常遇到使用图标的地方,找了许多解决方式,最终还是选择了...接下来记录一次如何在vue中封装icon,更高效的使用icon。 本篇文章取自:手摸手,带你优雅的使用 icon 封装组件 首先让我们先创建一个公共...
  • Vue 引入 icon 图标

    万次阅读 2018-07-27 09:07:27
    npm install vue-svg-icon --save-dev 使用 1. 阿里巴巴矢量图 选择需要的字体修改参数 选择SVG下载 2. IcoMoon 点击右上角”icoMoon App” 点击左上角”Import Icons” 选择下载的 svg 文件,点击”...
  • vue icon is not working

    2021-01-07 02:38:32
    m submitting an icon request:</li><li>Type: ``</li><li>Icon Name: ``</li><li>Sample original Icon: <img alt="logo" src="" /></li><li>Extensions: ``</li><li>Filenames: ``...
  • 请在我的YouTube频道上查看更新的VUE内容: : list PL2PY2-9rsgl2uKW0DB5FJ-YRCAG-JuSWN 其他离子Vue样本 样品概述 概述 一个简单的应用程序,展示了将离子框架Web组件与vuejs一起使用的最新用法。 Vue路由器 ...
  • Vue3图标选择器 ... 由移植到Vue3 :) 查看的演示:) 如何建造 git clone ...cd vue3-icon-picker yarn yarn dev # when you're happy with the changes yarn build 预览
  • 创建一个新的vue项目: npm install --global vue-cli vue init webpack my-project ...npm install vue-svg-icon --save-dev 配置路由: import Vue from 'vue' import Router from 'vue-router'...
  • YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志 © YDOOK JYLin 1. 将新 icon 文件拖入文件目录: ./public: 2. 新建或者在已有的 vue.config.js 文件根位置中输入: module.exports = { pwa: { iconPaths...
  • $ npm i -S vue-iconfonts 手册 <!-- Add vue.js dependency to your HTML file first --> < script src =" https://unpkg.com/vue/dist/vue.js " > </ script > <!-- Add vue-iconfonts.js ...
  • 阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍创建SvgIcon组件 .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: ...

空空如也

空空如也

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

iconvue

vue 订阅