vue怎么直接嵌入svg

Vue很棒 (Vue-Awesome)

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Vue.js的超赞SVG图标组件，带有内置的Font Awesome图标。

Vue-Awesome an SVG icon component for Vue.js, with built-in icons courtesy of Font Awesome.

Vue-Awesome Vue.js的SVG图标组件，内置图标由Font Awesome提供。

安装 (Installation)

npm(推荐) (npm (Recommended))

$ npm install vue-awesome

凉亭 (bower)

$ bower install vue-awesome

手册 (Manual)

Just download dist/vue-awesome.js and include it in your HTML file:

只需下载dist/vue-awesome.js并将其包含在您HTML文件中即可： 

<script src="path/to/vue-awesome/dist/vue-awesome.js"></script>

用法 (Usage)

<!-- basic -->
<v-icon name="beer"/>

<!-- with options -->
<v-icon name="sync" scale="2" spin/>
<v-icon name="comment" flip="horizontal"/>
<v-icon name="code-branch" label="Forked Repository"/>

<!-- stacked icons -->
<v-icon label="No Photos">
  <v-icon name="camera"/>
  <v-icon name="ban" scale="2" class="alert"/>
</v-icon>

Font Awesome 5 has separated all icons into several packs. Vue-Awesome is built upon its all free icons, which includes all free icons from 3 icon packs: regular, solid and brands. Since the solid pack has the most number of icons, we organize all Vue-Awesome icons as follows:

Font Awesome 5将所有图标分为几个包。 Vue-Awesome建立在其所有免费图标的基础上，其中包括3个图标包中的所有免费图标： regular ， solid和brands 。 由于solid pack的图标数量最多，因此我们按以下方式组织所有Vue-Awesome图标：

  • All icons from solid pack are located in vue-awesome/icons directory and have unprefixed name prop values.

    solid pack中的所有图标都位于vue-awesome/icons目录中，并且具有未前缀的name prop值。

  • Icons from regular and brands are located in vue-awesome/icons/regular and vue-awesome/icons/brands, which have prefixed name prop values like regular/flag or brands/reddit.

    regular和brands图标位于vue-awesome/icons/regular和vue-awesome/icons/brands ，它们具有前缀name属性值，例如regular/flag或brands/reddit 。

You can find all available name values from Font Awesome's website like beer, file and camera.

您可以从Font Awesome网站上找到所有可用的name值，例如beer ， file和camera 。

带有NPM和vue-loader的ES模块(推荐) (ES Modules with NPM & vue-loader (Recommended))

import Vue from 'vue'

/* Pick one way between the 2 following ways */

// only import the icons you use to reduce bundle size
import 'vue-awesome/icons/flag'

// or import all icons if you don't care about bundle size
import 'vue-awesome/icons'

/* Register component with one of 2 methods */

import Icon from 'vue-awesome/components/Icon'

// globally (in your main .js file)
Vue.component('v-icon', Icon)

// or locally (in your component file)
export default {
  components: {
    'v-icon': Icon
  }
}
Head️抬头 (⚠️ Heads up)
导入源版本 (Importing the souce version)

If you are using official Vue CLI to create your project and you want to use the untranspiled component (import vue-awesome/components/Icon rather than import vue-awesome directly, to optimize bundle size, which is recommended), you'll encounter the problem that the default configuration will exclude node_modules from files to be transpiled by Babel.

如果您使用正式的Vue CLI创建项目，并且想要使用未转译的组件(建议使用vue-awesome/components/Icon而不是直接导入vue-awesome来优化捆绑包大小，则建议这样做)，您将遇到默认配置将从node_modules的文件中排除node_modules的问题。

For Vue CLI 3+, add vue-awesome into transpileDependencies in vue.config.js like this:

对于Vue CLI 3+ ，将vue-awesome添加到transpileDependencies中的vue.config.js如下所示： 

// vue.config.js
module.exports = {
  transpileDependencies: [
    /\bvue-awesome\b/
  ]
}

For Vue CLI 2 with the webpack template, modify build/webpack.base.conf.js like this:

对于具有webpack模板的Vue CLI 2 ，按webpack修改build/webpack.base.conf.js ： 

{
        test: /\.js$/,
        loader: 'babel-loader',
-       include: [resolve('src'), resolve('test')]
+       include: [
+         resolve('src'),
+         resolve('test'),
+         resolve('node_modules/vue-awesome')
+       ]
      }

If you are using bare webpack config, just do similar modifications make it work.

如果您使用的是裸露的webpack配置，只需进行类似的修改即可使用。

与Nuxt.js一起使用 (Using with Nuxt.js)

When using Vue-Awesome on the server side with Nuxt.js, it may prompt Unexpected token import because Nuxt.js has configured an external option by default, which prevent files under node_modules from being bundled into the server bundle with only a few exceptions. We need to whitelist vue-awesome in nuxt.config.js as follows:

当在服务器端使用Nuxt.js的Vue-Awesome时，它可能会提示Unexpected token import因为Nuxt.js默认情况下已配置了一个external选项，这会阻止node_modules下的文件捆绑到服务器捆绑包中，只有少数例外。 我们需要在nuxt.config.js vue-awesome列入白名单，如下所示：

For Nuxt.js 2:

对于Nuxt.js 2 ： 

module.exports = {
  // ...
  build: {
    transpile: [/^vue-awesome/]
  }
}

For Nuxt.js 1:

对于Nuxt.js 1 ： 

// Don't forget to
// npm i --save-dev webpack-node-externals
const nodeExternals = require('webpack-node-externals')

module.exports = {
  // ...
  build: {
    extend (config, { isServer }) {
      // ...
      if (isServer) {
        config.externals = [
          nodeExternals({
            // default value for `whitelist` is
            // [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i]
            whitelist: [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i, /^vue-awesome/]
          })
        ]
      }
    }
  }
}
用Jest进行单元测试 (Unit Testing with Jest)

Make sure to whitelist vue-awesome from the transformIgnorePattern. Add following configuation in test/unit/jest.conf.js:

确保从transformIgnorePattern vue-awesome列入白名单。 在test/unit/jest.conf.js添加以下test/unit/jest.conf.js ： 

+ transformIgnorePatterns: [
+   '/node_modules(?![\\\\/]vue-awesome[\\\\/])/'
+ ],

Don't import all icons if you don't want to make unit testing slow because this will transform all icons from ES module and thus slow down the test process.

如果您不想让单元测试变慢，请不要导入所有图标，因为这会转换ES模块中的所有图标，从而减慢测试过程。

不带ES Next支持的NPM的CommonJS (CommonJS with NPM without ES Next support)

var Vue = require('vue')

// requiring the UMD module
var Icon = require('vue-awesome')

// or with vue-loader you can require the src directly
var Icon = require('vue-awesome/components/Icon')

// register component to use

AMD公司 (AMD)

require.config({
  paths: {
    'vue-awesome': 'path/to/vue-awesome'
  }
})

require(['vue-awesome'], function (Icon) {
  // register component to use
  Vue.component('v-icon', Icon)
})

全局变量 (Global variable)

The component class is exposed as window.VueAwesome.

组件类公开为window.VueAwesome 。 

// register component to use
Vue.component('v-icon', VueAwesome)

道具 (Props)

  • name: string

    name: string

    The name of the icon. It's necessary if the component isn't used as the wrapper of an icon stack. All valid names correspond to the file path relative to the icons directory. Notice that you may have to check the name of the icon pack after you search on FontAwesome's website. For example, you'll see a URL argument of style=brands on the detail page for 500px and the icon name will be brands/500px.

    图标的名称。 如果该组件不用作图标堆栈的包装，则很有必要。 所有有效名称对应于相对于icons目录的文件路径。 请注意，在FontAwesome的网站上搜索后，您可能必须检查图标包的名称。 例如，您将在详细信息页面上看到URL参数style=brands 为500px ，图标名称为brands/500px 。

    Only free icons for FontAwesome are available by default and because the solid style has the most icons, we've made it the default pack so the path prefixes can be omitted.

    默认情况下，仅FontAwesome的免费图标可用，并且由于solid样式具有最多的图标，因此我们将其设置为默认包，因此可以省略路径前缀。

    If you pass null to this prop, the whole component will not be rendered.

    如果将null传递给此prop，则不会渲染整个组件。

  • scale: number|string

    scale: number|string

    Used to adjust the size of the icon. Default to 1.

    用于调整图标的大小。 默认为1 。

  • spin: boolean

    spin: boolean

    Used to specify whether the icon is spining. Default to false.

    用于指定图标是否正在旋转。 默认为false 。

  • inverse: boolean

    inverse: boolean

    If set to true, the color of the icon will become #fff. Default to false.

    如果设置为true ，则图标的颜色将变为#fff 。 默认为false 。

  • pulse: boolean

    pulse: boolean

    Set the pulse effect to the icon. Default to false.

    将脉冲效果设置为图标。 默认为false 。

  • flip: 'vertical'|'horizontal'|null

    flip: 'vertical'|'horizontal'|null

    Used to flip the icon.

    用于翻转图标。

  • label: string

    label: string

    Set the aria-label for the icon if provided. Otherwise the icon will have role="presentation" thus not accessible.

    设置图标的aria-label (如果提供)。 否则，该图标将具有role="presentation"因此无法访问。

杂项 (Misc)

If you are using vue-awesome/components/Icon (instead of the whole bundled version), Vue-Awesome won't import a single icon by default. Do not forget to import icons you want to use.

如果您使用的是vue-awesome/components/Icon (而不是整个捆绑版)，则默认情况下，Vue-Awesome不会导入单个图标。 不要忘记导入要使用的图标。

If these caveats don't help and there are no proper workarounds in earlier issues, please feel free to file a new one.

如果这些注意事项没有效果，并且早期问题中没有适当的解决办法，请随时提出新的建议 。

造型 (Styling)

动态尺寸 (Dynamic sizing)

You can make the icons scale dynamically according to your font-size by adding the following CSS:

您可以通过添加以下CSS使图标根据font-size动态缩放： 

.fa-icon {
  width: auto;
  height: 1em; /* or any other relative font sizes */

  /* You would have to include the following two lines to make this work in Safari */
  max-width: 100%;
  max-height: 100%;
}

色彩 (Colors)

The icon color is inherited from the font color of the parent element by default. You can easily change it to any other color by specifying the color property.

默认情况下，图标颜色继承自父元素的字体颜色。 您可以通过指定color属性将其轻松更改为任何其他颜色。

当地发展 (Local development)

$ npm i
$ npm run dev

Open http://localhost:8080/demo to see the demo.

打开http://localhost:8080/demo观看演示。

更新图标 (Updating icons)

Don't touch files in src/icons but update assets/svg/* instead and run npm run icons to re-generate icon module files.

不要触摸src/icons文件，而是更新assets/svg/*并运行npm run icons来重新生成图标模块文件。

注册自定义图标 (Registering custom icons)

简单的情况 (Simple case)

You can register custom icons like this:

您可以像这样注册自定义图标： 

import Icon from 'vue-awesome/components/Icon'

Icon.register({
  baidu: {
    width: 23.868,
    height: 26,
    d: 'M3.613 13.701c2.827-.608 2.442-3.986 2.357-4.725-.138-1.139-1.477-3.128-3.296-2.971C.386 6.21.052 9.515.052 9.515c-.309 1.528.74 4.793 3.561 4.186zm3.002 5.875c-.083.238-.268.846-.107 1.375.315 1.187 1.346 1.24 1.346 1.24h1.48v-3.619H7.749c-.713.213-1.057.767-1.134 1.004zM8.86 8.035c1.562 0 2.823-1.797 2.823-4.019C11.683 1.796 10.421 0 8.86 0 7.301 0 6.036 1.796 6.036 4.016c0 2.222 1.265 4.019 2.824 4.019zm6.724.265c2.087.271 3.429-1.956 3.695-3.644.272-1.686-1.074-3.644-2.552-3.98-1.48-.339-3.329 2.032-3.497 3.578-.2 1.89.271 3.778 2.354 4.046zm5.114 9.923s-3.229-2.498-5.113-5.198c-2.555-3.981-6.185-2.361-7.399-.337-1.209 2.024-3.093 3.305-3.36 3.644-.271.334-3.9 2.293-3.095 5.871.806 3.576 3.635 3.508 3.635 3.508s2.085.205 4.504-.336c2.42-.537 4.503.134 4.503.134s5.652 1.893 7.199-1.751c1.545-3.645-.874-5.535-.874-5.535zm-9.671 5.423H7.352c-1.587-.316-2.219-1.4-2.299-1.584-.078-.188-.528-1.059-.29-2.539.686-2.219 2.642-2.379 2.642-2.379h1.956V14.74l1.666.025v8.881zm6.844-.025h-4.229c-1.639-.423-1.716-1.587-1.716-1.587v-4.677l1.716-.027v4.203c.104.447.661.529.661.529h1.742v-4.705h1.825v6.264zm5.986-12.486c0-.808-.671-3.239-3.159-3.239-2.492 0-2.825 2.295-2.825 3.917 0 1.548.131 3.71 3.227 3.641 3.096-.068 2.757-3.507 2.757-4.319z'
  }
})

更高级的案例 (More advanced cases)

If your SVG file has more than one path or polygon, and/or you want to have a predefined style, you can register like this:

如果您的SVG文件具有多个路径或多边形，并且/或者您想要具有预定义的样式，则可以按以下方式进行注册：

路径 (Paths)
import Icon from 'vue-awesome/components/Icon'

Icon.register({
  webpack: {
    width: 1200,
    height: 1200,
    paths: [
      {
        style: 'fill:#8ED6FB',
        d: 'M1035.6 879.3l-418.1 236.5V931.6L878 788.3l157.6 91zm28.6-25.9V358.8l-153 88.3V765l153 88.4zm-901.5 25.9l418.1 236.5V931.6L320.3 788.3l-157.6 91zm-28.6-25.9V358.8l153 88.3V765l-153 88.4zM152 326.8L580.8 84.2v178.1L306.1 413.4l-2.1 1.2-152-87.8zm894.3 0L617.5 84.2v178.1l274.7 151.1 2.1 1.2 152-87.8z'
      },
      {
        style: 'fill:#1C78C0',
        d: 'M580.8 889.7l-257-141.3v-280l257 148.4v272.9zm36.7 0l257-141.3v-280l-257 148.4v272.9zm-18.3-283.6zM341.2 436l258-141.9 258 141.9-258 149-258-149z'
      }
    ]
  }
})
多边形 (Polygons)
import Icon from 'vue-awesome/components/Icon'

Icon.register({
  vue: {
    width: 256,
    height: 221,
    polygons: [
      {
        style: 'fill:#41B883',
        points: '0,0 128,220.8 256,0 204.8,0 128,132.48 50.56,0 0,0'
      },
      {
        style: 'fill:#35495E',
        points: '50.56,0 128,133.12 204.8,0 157.44,0 128,51.2 97.92,0 50.56,0'
      }
    ]
  }
})
原始SVG (Raw SVG)

You need to include innersvg-polyfill before you use this feature.

使用此功能之前，您需要包括innersvg-polyfill 。 

import Icon from 'vue-awesome/components/Icon'

Icon.register({
  'html5-c': {
    width: 512,
    height: 512,
    raw: '<path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/><path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/><path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/><path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>'
  }
})

翻译自: https://vuejsexamples.com/font-awesome-component-for-vue-js-using-inline-svg/

vue怎么直接嵌入svg

# html # npm # less
Logo
openvela

openvela 操作系统专为 AIoT 领域量身定制，以轻量化、标准兼容、安全性和高度可扩展性为核心特点。openvela 以其卓越的技术优势，已成为众多物联网设备和 AI 硬件的技术首选，涵盖了智能手表、运动手环、智能音箱、耳机、智能家居设备以及机器人等多个领域。

更多推荐

cover

Arm Ethos‑U65：YOLOv8n 模型准备与 Vela 编译

avatar openvela
cover

开源新纪元：深度解析小米 MiMo Code 的技术架构与实战应用

avatar openvela

UniAD_v2 模型NPU适配

参考github网址：https://github.com/OpenDriveLab/UniAD/tree/v2.0参考readme：https://gitcode.com/Ascend/DrivingSDK/blob/master/model_examples/UniAD/README.md。

avatar openvela