• 在Vue中使用svg图标即封装自定义svg-icon标签


    参考 Vue项目中使用svg图标   这篇软文质量不错, 依葫芦画瓢,也跑通了

    1.慢慢在理解其中包含的知识

    2. 把自己理解换一种方式表达一下

     我们想在vue页面使用svg图标,例如

    <template>
      <div>
        <h1>Svg实践,在页面中使用</h1>
        <svg-icon icon-class="add"></svg-icon>
        <svg-icon icon-class="auto"></svg-icon>
      </div>
    </template>
    
    <script>
    export default {
      props: {},
      components: {},
      data() {
        return {};
      },
      computed: {},
      created() {},
      mounted() {},
      watch: {},
      methods: {}
    };
    </script>

    参考上面的文章

    以上代码是svg的原生用法(正确性未验证)

    1. src/icons 目录, 导入 svg 资源文件

    2. npm install svg-sprite-loader --save-dev =>package.json

    3. 配置webpack.base.conf.js(build文件夹中)
    //设置Webpack 用 svg-sprite-loader 加载, src/icons 目录的内容,
    换一种方式:
    1). 在 rules 下增加

    {
        test: /.svg$/,
        loader: "svg-sprite-loader",
        include: [resolve("src/icons")],
        options: {
            symbolId: "icon-[name]"
        }
    },    

    //实际效果是,上面配置后webpack会加载src/icons下的index.js

    2). webpack.base.conf.js 原生的 loader: 'url-loader',中去掉svg,就不再额外添加
    指令: exclude:[resolve('src/icons')] ,

    如下:

    {
        test: /.(png|jpe?g|gif)(?.*)?$/,
        loader: 'url-loader',
        options: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
    },

    4. 自定义svg组件封装svg功能

    基础核心知识
    srciconsindex.js 中
    import SvgIcon from '@/components/SvgIcon' 的加载行为
    加载 srccomponentsSvgIconindex.vue

    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">

    在Vue中使用svg图标即封装自定义svg-icon标签
    如在 SvgDemo.vue 使用如下标签

    <template>
        <div>
            <h1>Svg实践,在页面中使用</h1>
            <svg-icon icon-class="add"></svg-icon>
            <svg-icon icon-class="auto"></svg-icon>
        </div>
    </template>                
  • 相关阅读:
    次短路
    【学习笔记】Git工具clone异常
    【学习笔记】 UOS安装MySQL
    AcWing 327. 玉米田(状态压缩动态规划)
    我发现了个 Python 黑魔法,执行任意代码都会自动念上一段 『平安经』
    redis主从复制-密码问题
    java远程连接服务器端的redis
    组态王历史趋势图的一些问题
    使用 autofac 实现 asp .net core 的属性注入
    从一切皆数据与计算的角度,理解进程与线程
  • 原文地址:https://www.cnblogs.com/zhuji/p/13135015.html
Copyright © 2020-2023  润新知