Vueプロジェクトはsvgを導入して使用します
プロジェクトページの増加に伴い、UIライブラリのsvgアイコンは徐々に不十分になっています。そのため、UIは多くの新しいsvgアイコンを提供しました。それらを1つずつ導入するのは明らかに非現実的であるため、svgを指定フォルダーに入れてからバッチでインポートし、このsvgの山をコンポーネントで使用します。
プロジェクト構造
|--build
| `-- webpack.base.js
`--src
`-- assets
`-- icons
|-- index.js
`-- svg
`-- 全部的svg图标 `xxx.svg`
おそらくディレクトリ構造は次のとおりです。独自のwebpack構成を記述しているため、フォルダ内のすべてのsvgアイコンvue.config.jsを変換する方法は劣っ
ていassets/icons/svgます。assets/icons/index.jsインポートされたエントリファイルですか
すべてのsvgを動的にインポートします
- アセット/アイコン/index.js
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
index.jsドキュメントは、
./svgすべてのディレクトリ.svgファイルを紹介するためのもので、requireAllを使用します。手動で紹介する必要があります。
コンポーネントを作成し、svgを使用します
アセットディレクトリにリソースをsvgし、続いて新しいアセンブリをsrc/components作成するだけなので、ディレクトリに新しいSvgIcon.vueコンポーネントを作成します
- src / components / SvgIcon.vue
<template>
<svg class="svg-icon" aria-hidden="true" v-if="iconName">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
import '../assets/icons/index'
export default {
name: 'SvgIcon',
props: {
name: {
default: '',
type: String
}
},
computed: {
iconName() {
let name = this.name
if (name) {
return `#icon-${name}`
} else {
return '#icon-icon'
}
}
}
}
</script>
8行目のコードに注意して、対応するjsファイルを紹介します。そのため、コンポーネントを登録すると、対応するアイコンが自動的に導入されます
21行目に注意し
#icon-${name}てください。後で説明します。
webpack構成を変更する
コンポーネントの準備はできていますが、webpackはjsファイルのみを認識するため、svgをサポートする対応するプラグインを見つける必要があります svg-sprite-loader
npm i svg-sprite-loader -D
プロジェクトのwebpack構成
自己定義の構成Webpackの場合はmodule.rules、処理svgを追加してください。
- webpack.config.js
svgoConfigは私のプロジェクトのカスタマイズされたコンテンツであり、参照用であり、オンデマンドでオプションです
次に、svgの構成が他のライブラリ（iviewなど）と競合
/src/assets/iconsする場合は、変換を行うように指定されたものだけを構成し、残りはurl-loader処理する必要がありますsvg-sprite-loaderが指定されたフォルダーを処理した
url-loaderので、プロセスを繰り返す必要があります（エフェクトの主な機能の構成のこの部分が同じであることを理解するには）このようにして、プロジェクトの元のsvgは影響を受けることなく処理でき、新しく追加されたsvg-iconもプラグインによって処理されます。
var svgoConfig = JSON.stringify({
plugins: [
{
removeTitle: true },
{
convertColors: {
shorthex: true } },
{
convertPathData: true },
{
cleanupAttrs: true },
{
removeComments: true },
{
removeDesc: true },
{
removeUselessDefs: true },
{
removeEmptyAttrs: true },
{
removeHiddenElems: true },
{
removeEmptyText: true }
]
})
module: {
rules: [
{
test: /.*\.svg$/,
loaders: [
{
loader: 'svg-sprite-loader',
options: {
symbolId: 'icon-[name]'
}
},
'svgo-loader?' + svgoConfig
],
include: [
// 处理不了 iview 的字体，所以只处理本地svg
resolve('/src/assets/icons')
]
},
{
test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
publicPath: '../../',
limit: 10000,
name: utils.assetsPath('fonts/[name].[ext]?[hash:7]')
},
exclude: [resolve('/src/assets/icons')] // 已经交由 svg-sprite-loader 处理，就排除指定文件夹
}
]
}
Vue-cli構成
同様に、vue-cliのデフォルトにはsvgプラグイン処理があるため、最初のsrc/assets/icons除外
次に、svg-sprite-loaderを使用して、処理アイコンを構成します
module.exports = {
chainWebpack(config) {
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
アイコン名の謎
webpack構成かvue-cli構成かを確認できます。options.symbolId構成にはピリオドがありicon-[name]ます。これが、最終的にsvgが使用する主要なコンポーネントを特定する理由です。そこで、同じ形式のicon-コンポーネントを必要とし、返し#icon-${name}ます。
呼び出したくない場合はicon-xxx、コンポーネントを変更することを忘れないでください。設定Webpackは変更を同期する必要がありました。
svgコンポーネントを使用する
コンポーネントを紹介する手順は書かれていません。使用法は次のとおりです。
例はsvgのファイル名で、ファイルは次のとおりです。 assets/icons/svg/example.svg
<svg-icon name="example" />
このようにして、カスタムsvgを楽しく使用できます。